React组件导入本地图片出现Attempted import error报错是何原因？

错误原因 #

你使用了具名导入的语法导入非JS模块的静态图片资源，才触发了这个报错。
jpg这类静态资源文件本身不是JS模块，不存在名为stock的具名导出，你的项目打包工具（Webpack/Vite等）对静态资源的导入支持仅针对默认导入生效。

修复方法 #

把原导入代码：

import {stock} from '../images/stock.jpg'

修改为默认导入写法，去掉导入变量外侧的大括号即可：

import stock from '../images/stock.jpg'

修改后导入的stock变量会被打包工具处理为图片的实际访问路径，可直接用于img标签的src属性。

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