React项目中img标签本地图片加载失败问题求助

方法1：通过import引入图片（推荐） #

在Testimonials.js文件顶部导入目标图片，再在img标签的src中使用导入的变量：

// 路径和CSS里的./images对应，根据实际文件结构调整
import heroImg from './images/hero.jpg';

// 组件内使用
<img className="s-img-switch" src={heroImg} alt="hero image" />

方法2：将图片放入public目录，使用绝对路径 #

1. 把hero.jpg移到项目根目录的public/images文件夹（没有就创建）
2. 在img标签中用根路径访问：

<img className="s-img-switch" src="/images/hero.jpg" alt="hero image" />

为什么之前的写法无效？ #

React项目（比如基于Create React App）中，JSX里直接写相对路径字符串（如./images/hero.jpg）不会被webpack处理，浏览器会以当前页面URL为基准请求资源，导致路径错误。而CSS中的url()会被webpack解析，自动转换为打包后的正确资源路径，所以CSS能正常加载图片。

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