无法从 public/images/img-2.jpg 访问 App.css 中的图像答案

【问题标题】：Cant access image in App.css from public/images/img-2.jpg无法从 public/images/img-2.jpg 访问 App.css 中的图像
【发布时间】：2021-09-10 23:07:51
【问题描述】：

当我希望特定部分具有我在公共文件夹内的图像文件夹中的背景图像时，我正在创建一个反应应用程序。访问这些图像似乎可以正常工作，除非我尝试从 App.css 访问它们

错误：编译失败。

./src/App.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss! ./src/App.css) 错误：无法解析“C:\Users\shlok\OneDrive\Desktop\React\react-website-1\src”中的“/images/img-2.jpg”

App.css

.services {
  background-image: url('/images/img-2.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  font-size: 100px;
}

.products {
  background-image: url('/images/img-1.jpg');
  background-position: center;
  background-size: fill;
  background-repeat: no-repeat;
  color: #fff;
  font-size: 100px;
}

.sign-up {
  background-image: url('/images/img-8.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
  font-size: 100px;
}

【问题讨论】：

标签： html css reactjs

【解决方案1】：

嘿，您是否尝试过提供公用文件夹中的路径。根据您的文件夹结构，您的图像文件夹位于公用文件夹中。你能试着给出像'public/images/img-1.jpg'这样的路径

【讨论】：

【解决方案2】：

url 应如下所示：

background-image: url('../public/images/img-2.jpg');

您需要离开您的 src 文件夹并进入您的公共文件夹，然后查看那里的图像。

如果上述方法不起作用，可能是因为以下原因：
在 React 中，将图像放在 src 文件夹中是一种强迫行为。否则，它们将无法通过 components 文件夹中的任何代码轻松访问。

尝试在src 目录中创建一个新文件夹，然后移动图像。或者你可以直接把整个images文件夹和剪切粘贴到你的src文件夹中。

【讨论】：