React行内CSS背景图及本地图片无法加载问题求助

这是React新手刚上手项目时很容易踩的坑，核心原因是Create React App（或基于Webpack的React项目）的资源打包机制在起作用。

当你直接写./img/1.jpeg这种字符串路径时，Webpack并不会把它当作需要处理的资源文件——它只会把这个字符串原封不动地保留在代码里。但项目打包后，本地图片的实际位置会被Webpack重新处理：比如图片会被重命名（加上哈希值），并放到build/static/media这类目录下。浏览器最终拿到的还是你写的原始路径，自然找不到对应的图片文件。

具体到你遇到的两种情况：

• 用img标签的src属性直接写相对路径：浏览器会从当前页面的URL去解析这个路径，而不是你的源码目录，肯定找不到正确的资源。
• 用行内样式的backgroundImage设置路径：原理和上面一样，CSS里的路径没有经过Webpack的资源解析，最终指向的位置根本不存在图片。

你后来用require()的方式解决问题是完全正确的，因为：
Webpack会识别require('./img/1.jpg')这种写法，把图片当作模块来处理——它会自动复制图片到打包后的输出目录，同时返回处理后的真实可访问URL。把这个URL传递给组件后，不管是用在backgroundImage还是img标签里，都能正常加载图片。

举个代码对比：
你最初的写法（无法加载）：

{this.renderPortfolio(1,'./img/1.jpeg')}

这里传递的是纯字符串路径，Webpack不会做任何处理，最终浏览器拿到的还是./img/1.jpeg，但打包后的图片不在这个位置。

修改后的正确写法：

{this.renderPortfolio(1,require('./img/1.jpg'))}

此时Webpack会解析这个图片资源，返回打包后的正确URL，组件拿到后就能正确渲染了。

另外还有一种等价的写法，就是提前用import导入图片：

// 在Home组件顶部导入图片
import img1 from './img/1.jpg';
import img2 from './img/2.jpg';

// 然后在render里传递
{this.renderPortfolio(1, img1)}
{this.renderPortfolio(2, img2)}

效果和require()完全一致，都是让Webpack正确处理本地资源的路径。

内容的提问来源于stack exchange，提问作者William Hartanto