Javascript 反应导入背景图像

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

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

我的App.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;

import'/App.css'；
函数App（）{
返回(
阿斯达斯达斯德
);
}
导出默认应用程序；

我的项目结构：

我的理解是，只要图像在src文件夹中，我就可以通过URL（）相对地访问它。有人能告诉我我做错了什么吗？

你可以使用插件更新你的babel配置

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

#链接中提供了相同的配置。然后，您可以使用完整的路径引用您的图像

您可以使用插件更新您的babel配置

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

---

#链接中提供了相同的配置。然后，您可以使用完整路径引用图像。jpeg表示它位于项目的根目录中，而

/img/dots.jpeg

将指示

img

目录与

App.css

文件位于同一目录中。

/img/dots.jpeg

表示它位于项目的根目录中，而

/img/dots.jpeg

将指示

img

目录与

App.css

文件位于同一目录中。

在css中导入文件似乎有误

您没有告诉查找文件的确切位置

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

---

添加以上几行将解决问题

在css中导入文件似乎有误

您没有告诉查找文件的确切位置

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

---

添加以上几行可以解决问题

如何替换背景图像：url（'/img/dots.jpeg'）；到背景图像：url（'./img/dots.jpeg'）；是的，这就解决了它。从背景图像替换：url（'/img/dots.jpeg'）；到背景图像：url（'./img/dots.jpeg'）；是的，修好了。谢谢修好了。你能解释一下为什么点会有不同吗？点代表当前目录：谢谢你修复了它。你能解释一下为什么点会有不同吗？点代表当前目录：