无法解析“E:\React\react-demo\src”中的“/images/img-2.jpg”

Posted 2023-03-06

【中文标题】无法解析“E:\\React\\react-demo\\src”中的“/images/img-2.jpg”

【英文标题】：Can't resolve '/images/img-2.jpg' in 'E:\React\react-demo\src'无法解析“E:\React\react-demo\src”中的“/images/img-2.jpg”

【发布时间】：2021-03-15 11:07:32

【问题描述】：

这是我正在尝试添加图像的代码，但它显示错误

背景图片：url('/images/img-2.jpg');

编译失败。

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

【参考方案1】：

因为您要求的图像不在src 文件夹中！也许您正在尝试访问 React 项目中 public 文件夹中的图像。

我朋友的生活很简单，React - 使用 Webpack - 将 jpg/png..etc 图像转换为 base64 然后将 URL 替换为 base64... 像这样

因此，您需要在包含所有图像的 src 文件夹中创建一个 assets/images 文件夹?，然后在 CSS 中导入链接

  background-image: url("./assets/images/logo512.png");

同样，React 会将图像转换为 bases64！这将使图像不依赖于文件夹路径。

【参考方案2】：

我也遇到了类似的情况。 这是我所做的修复： 错误是说您在 src ?

下没有

image

?

只需将 图像 ? 移动到 src 下，然后将 URL 重定向到它

背景：url('/src/images/img-2.jpg');

【参考方案3】：

将您的图像添加到您的 src ...几乎将其从 public 移动到 src 文件夹

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

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。