React项目中如何使用本地导入的图片？

你写的<img src='my_image.png'/>无法正常显示，是因为React项目编译阶段会由webpack处理src目录下的资源，直接写相对路径的话，打包后资源路径会发生变化，浏览器无法匹配到正确的资源地址，可通过以下三种方案解决：

方案1：将图片放置在public目录 #

• 直接将my_image.png放入项目根目录的public文件夹中，原有代码无需修改即可生效。public目录下的资源不会被webpack编译，会原样复制到打包后的产物根目录。
  适用场景：无需动态引入、体积较大的公共资源

方案2：提前导入后使用（官方推荐） #

• 先在组件头部导入对应图片：

// 路径替换为图片在src目录下的实际相对路径
import myImage from './my_image.png';

• 再在img标签中调用导入的变量：

<img src={myImage} alt="图片描述" />

优势：webpack会在编译阶段处理图片，小体积图片会自动转为base64减少网络请求，同时资源会自动添加哈希戳避免缓存问题。

方案3：使用require动态引入 #

适合需要动态切换图片的场景，写法如下：

// React v16及以下版本
<img src={require('./my_image.png')} alt="图片描述" />

// React v17及以上版本需加.default
<img src={require('./my_image.png').default} alt="图片描述" />

注意事项 #

• 所有引入路径需要和图片实际存放层级对应，比如图片存放在src/assets/images下，相对路径就要写为./assets/images/my_image.png
• 务必填写alt属性，既符合无障碍规范，也可以在图片加载失败时展示提示文本。

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