React项目public文件夹内图片构建后无法加载的404问题

你好呀！看你在React项目构建后遇到了public文件夹里的图片加载404的问题，我来帮你捋捋原因和解决办法~

问题根源 #

首先得搞清楚React里public文件夹的特殊逻辑：这个文件夹里的资源会被直接复制到构建后的build根目录，不会经过Webpack的打包处理。而你在scss里写的./../../../public/apple.png是相对路径，它是相对于你的style.scss文件位置的，但构建后CSS文件会被打包到static/css目录下，浏览器加载时会从这个CSS目录出发去查找图片，自然找不到根目录里的apple.png，这就是404的原因啦。

解决办法 #

这里给你两个靠谱的解决方案，选哪个都可以：

方案一：改用绝对路径引用

直接把scss里的图片路径改成绝对路径/apple.png，因为public里的资源构建后在网站根目录，绝对路径会直接从根目录开始查找，不管CSS文件最终在哪都能定位到图片。修改后的代码如下：

&__container::after{
    position: absolute;
    content: '';
    display: block;
    bottom: -101px;
    left: 50%;
    height: 750px;
    width: 760px;
    background-image: url('/apple.png');
}

方案二：将图片移到src目录下引用

如果你更习惯用相对路径，可以把apple.png移到src目录下（比如放在src/components/About文件夹里，或者专门建个src/images文件夹），然后用相对路径引用。比如图片和style.scss同目录的话，路径就写成./apple.png，这样Webpack会正确处理图片的打包路径，构建后也能正常加载。

额外注意点 #

• 如果你给项目的package.json配置了homepage字段（比如部署到网站子目录），那绝对路径要对应调整。比如homepage设为/my-app，图片路径就要改成/my-app/apple.png。
• 确认一下build文件夹里的apple.png确实在根目录，而不是某个子文件夹里，这样绝对路径才能生效。

备注：内容来源于stack exchange，提问作者tothe