反应导入背景图片

Question

尝试导入 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;

我的项目结构：

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

Answer 1

stages = [ {"duration": 5, "users": 2, "spawn_rate": 2}, {"duration": 10, "users": 2, "spawn_rate": 2.001}, {"duration": 15, "users": 2, "spawn_rate": 2}, {"duration": 20, "users": 2, "spawn_rate": 2.001}, {"duration": 60, "users": 2, "spawn_rate": 2}, ] 表示它位于项目的根目录中，而 /img/dots.jpeg 表示 ./img/dots.jpeg 目录与 img 文件位于同一目录中。< /p>

Answer 2

您可以使用 module-resolver 插件并使用

更新您的 babel 配置

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

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

Answer 3

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

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

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

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