React 导入背景图片答案

【问题标题】：React import background imageReact 导入背景图片
【发布时间】：2026-01-28 06:30:01
【问题描述】：

尝试导入 jpeg 图像作为我在 React 中的背景，但不断收到错误消息

Error: Can't resolve '/img/dots.jpeg' in 'D:\Developer\mysite\src'

我的应用程序.css

.App {
  text-align: center;
  background-image: url('/img/dots.jpeg');
}

我的 App.js

import './App.css';

function App() {
  return (
      <div className="App" >
          <h1>asdasdasd</h1>
      </div>
  );
}

export default App;

我的项目结构：

我的理解是只要图片在src文件夹中我就可以通过URL()相对访问。谁能告诉我我做错了什么？

【问题讨论】：

如何从背景图像替换：url('/img/dots.jpeg');到背景图片： url('./img/dots.jpeg');
是的，已经解决了。

标签： javascript css reactjs

【解决方案1】：

/img/dots.jpeg 表示它位于项目的根目录中，而./img/dots.jpeg 表示img 目录与App.css 文件位于同一目录中。

【讨论】：

感谢修复。你能解释一下为什么点会有所不同吗？
圆点代表当前目录：en.wikipedia.org/wiki/…

【解决方案2】：

您可以使用 module-resolver 插件并更新您的 babel 配置

{
  "plugins": [
    ["module-resolver", {
      "root": ["./src"],
      "alias": {
        "test": "./test",
        "underscore": "lodash"
      }
    }]
  ]
}

#same 配置在链接中可用。然后你可以用完整的路径引用你的图片

【讨论】：

【解决方案3】：

在你的css中导入文件似乎有问题，

你没有告诉寻找文件的确切位置

.App {
    text-align: center;
    background-image: url('/img/dots.jpeg');
}

添加上面这几行就可以解决问题了

【讨论】：