如何访问 SCSS 中的 react 公共文件夹以导入图像答案

【问题标题】：How to access react public folder in SCSS to import images如何访问 SCSS 中的 react 公共文件夹以导入图像
【发布时间】：2020-05-03 12:37:45
【问题描述】：

公用文件夹中有一个名为“img”的文件夹。如果我写这个，背景：url(img/hero2.jpg) 无重复中心；然后它抛出这个错误。未找到模块：无法解析 'D:\Programming\react\redux-blog\src' 中的 './img/hero2.jpg'

如果我写这个背景：url(../public/img/hero1.jpg) 无重复中心；然后它说这个。未找到模块：您尝试导入位于项目 src/ 目录之外的 ../public/img/hero1.jpg。不支持 src/ 之外的相对导入。

【问题讨论】：

这可能对stackoverflow.com/questions/47196800/…有帮助

标签： reactjs sass react-image

【解决方案1】：

你可以在路径前面使用/ 吗？ background-image: url('/img/hero2.jpg') no-repeat center;

【讨论】：

【解决方案2】：

您需要创建一个src/img 文件夹并将图像放在那里。在 URL 上，您可以只使用background-image: url('/img/hero2.jpg')。 Webpack 将找到正在使用的图像并将它们复制到静态资产文件夹。不会发布未使用的图像，而且（取决于您的配置）它可以添加唯一名称以正确处理图像的不同版本并绕过代理缓存。

【讨论】：

【解决方案3】：

不要在 sass 文件中使用背景，而是在组件中使用它

【讨论】：

请在您的回答中提供更多详细信息。正如目前所写的那样，很难理解您的解决方案。
查看答案

【解决方案4】：

假设你想在一个 div 中给一个背景做出反应然后使用

<div style={{"background":"url(pathOfYourImageThatIsStoredInPublicDirectory)"}}>
</div>

【讨论】：