如何在React应用中导入本地图片？引入失败问题排查

问题根因 #

你使用file://协议的本地磁盘绝对路径加载图片不符合React项目的静态资源加载规则，浏览器出于安全层面的同源策略限制，会禁止Web页面直接访问本地磁盘文件，因此图片无法正常加载。

可行解决方案 #

方案1：存放到public目录直接引用 #

• 把需要引入的图片移动到React项目根目录的public文件夹下，可自行新建images等子文件夹做分类管理
• 引用时直接填写相对于public目录的路径即可，示例代码如下：

<img className="header_logo" src='/images/logo.png' alt="logo"/>

方案2：存放到src目录导入后使用 #

• 把需要引入的图片移动到React项目的src目录下，建议存放到src/assets/images这类资源专属目录
• 在使用图片的组件文件顶部先导入图片资源：

// 路径根据你实际存放的位置调整
import headerLogo from './assets/images/logo.png'

• 最后在img标签的src属性中传入导入的变量即可：

<img className="header_logo" src={headerLogo} alt="logo"/>

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