时间戳

首页 > 解决方案 > Create React App 4.0 无法解析公用文件夹中的图像路径

reactjs - Create React App 4.0 无法解析公用文件夹中的图像路径

问题描述

我已经升级到最新的 Create React App 4.0。现在scss无法解析公用文件夹中的图像资产。我之前使用的是 CRA 3.4.1。它工作得很好。

有任何想法吗？我不想用npm eject

icon.svg 在public/images

background-image: url(/images/icon.svg);

Failed to compile.

./src/Components/style.scss 
(./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!
./node_modules/postcss-loader/src??postcss!
./node_modules/resolve-url-loader??ref--5-oneOf-6-3!
./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!
./src/Components/style.scss)
Error: Can't resolve '../../../../../../icon.svg' in ''

在 Create React App 3.x 中，从 (S)CSS 中的公用文件夹中引用图像只需使用起始斜线即可，正如已在此处回答的那样。

正如 OP 所解释的那样，图像在public/images并且被引用为url(/images/icon.svg).

这不再适用于 Create React App 4.0.0 并给出错误消息Error: Can't resolve '../../../../../../icon.svg' in ''。Create React App的更新日志没有提到有关公用文件夹的重大更改。

标签： reactjswebpackcreate-react-app

解决方案

尝试更改为：（webpack 应将此解析为“真实”路径）

background-image: url(./icon.svg);

我知道您想将图像添加为背景图像css 属性，但也许另一种方法与您相关。
当您像这样导入时，您可以像使用普通组件一样使用它：

import { ReactComponent as Icon } from'<path_to_resource>/images/icon.svg';

<Icon />

来源： https ://create-react-app.dev/docs/adding-images-fonts-and-files/

推荐阅读