我在我的 react js 中添加了背景图片。但它显示一个错误答案

【问题标题】：I was adding a background image in my react js . But it is showing an error我在我的 react js 中添加了背景图片。但它显示一个错误
【发布时间】：2021-04-16 05:09:49
【问题描述】：

我在互联网上看到他们告诉要在公用文件夹中添加图像。所以我通过创建一个子文件夹名称 img 将我的图像添加到公共文件夹中，我将我的图像“mario.png”放入其中。

因为我想将该图像添加为背景图像，所以我在 index.css 中编写了这段代码


body{
    margin:0;
    padding: 0;
    font-family: sans-serif;
    background: url(/img/mario.png);
    background-size: 100%;
    background-position: bottom;
    background-color: #95e8f3;  
    min-height: 100%;
}

但它仍然无法正常工作，它显示错误： ** ./src/index.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src /index.css) 错误：无法解析“D:\Users\PIRATES\Desktop\cool\src”中的“/img/mario.png” **

但是当我在 src 中创建一个资产文件夹时，它正在工作，但我想知道为什么当我将图像放在公用文件夹中时它不工作。

【问题讨论】：

url 值应该用引号引起来 url('/img/mario.png')
@PunithMithra 我已经添加了双引号，即使它不起作用。
你试过这个stackoverflow.com/questions/57162841/…吗？
查看这个答案：stackoverflow.com/questions/64852112/…
@fast-reflexes 是的，这是有效的。但是每个人都告诉你应该将图像添加到公用文件夹中，并且反应会自动检测到它在公用文件夹中，所以这不起作用，我只想知道为什么？

标签： css reactjs

【解决方案1】：

您没有正确使用url 功能。 docs

body{
    margin:0;
    padding: 0;
    font-family: sans-serif;
    background: url("/img/mario.png");
    background-size: 100%;
    background-position: bottom;
    background-color: #95e8f3;  
    min-height: 100%;
}

【讨论】：

【解决方案2】：

您必须在url 函数内添加相对路径，而不是从项目根目录开始的绝对路径。

考虑到你的截图，你必须这样写：

background: url('../public/img/mario.png');

【讨论】：