主页 / 问题 / 1263564
Accepted
Krovorgen
Asked:2022-03-30 02:48:34 +0000 UTC2022-03-30 02:48:34 +0000 UTC

反应。通过样式访问图像

  • 772

我欢迎大家。我很不擅长解释，但这个问题很有趣。请告诉我，我在 react 文件系统中的样式中看到了示例，即在 src 文件夹中（样式在组件旁边），例如，编写了以下路径：

$img-dir-path: '/img/';
background-image: url('#{$img-dir-path}event.png');

但其实这个img文件夹是公开的。它应该看起来像这样：

background-image: url('../../../public/img/event.png');

如果您以这种方式编写 jsx 标记：

<img src="img/main-bg.jpg" alt="" className={styles["main-page__img"]}/>

同样，该组件可以访问与公用文件夹相关的图片。请告诉我如何配置 react 以便搜索的路径不是相对于它所在的样式文件，而是相对于公共文件夹（使用组件如何执行此操作的示例）。

css

1 个回答

  1. Best Answer

    一切都与版本 4+ 的 react-scripts 更新有关。要解决此问题，请在此路径 node_modules/react-scripts/config/ 中查找 webpack.config.js 文件，并在第 123 行将 options: cssOptions 更改为 options: {...cssOptions, url: false}, 。使用低于版本 4 (3.4.x) 的 react-scripts，一切正常。解决方案链接： https ://github.com/facebook/create-react-app/issues/9870 https://stackoverflow.com/questions/57111197/react-path-to-public-folder-in-css-background -图片

    • 0

相关问题