React中使用相对路径直接设置img的src属性时图片无法加载

基于脚手架（Create React App、Vite等）搭建的React项目，构建阶段不会自动识别JSX里写死的相对路径字符串为静态资源引用：

• 你用import person from '../images/image1.png'写法时，构建工具（webpack/Vite）会主动捕获这个资源导入，完成图片压缩、hash重命名、路径替换、资源拷贝等操作，最终把线上可访问的真实路径赋值给person变量，所以这种写法可以正常加载。
• 你直接在src属性写"../images/image1.png"字符串时，构建工具会把它当成普通字符串透传到最终页面，浏览器加载图片时会基于当前页面的访问路由解析相对路径，而不是基于源码文件的目录结构解析，路径匹配不上自然加载失败。

方案1：使用public目录存放静态资源（通用无导入方案） #

所有主流React脚手架都约定根目录下的public文件夹为静态资源直出目录，里面的文件不会经过构建处理，会被直接拷贝到打包产物的根目录。

1. 把图片从src/images/移动到public/images/image1.png
2. JSX里用站点根路径引用即可，不需要写import：

<img src="/images/image1.png" alt="" />

注意：路径开头必须加/，代表从站点根目录寻址，不要写../这类相对路径，否则前端路由跳转后会出现路径解析错误。

方案2：显式触发构建工具的资源解析（不需要移动文件位置） #

如果不想把图片挪到public目录，可以在JSX里显式告诉构建工具要处理这个资源路径，不需要单独写顶部import：

• Vite项目通用写法：

<img src={new URL('../images/image1.png', import.meta.url).href} alt="" />

• Create React App（webpack构建）项目可以直接用require内联引入：

<img src={require('../images/image1.png')} alt="" />

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