React 使用 require 动态加载图片不显示

图片、头像加载不出来

发现头像使用本地导入方法不能正常显示
导入头像

icon: require(`../../assets/images/头像${i + 1}.png`), // 不能使用import

结果会报错

http://localhost:3000/[object%20Module] 404 (Not Found)

打印头像

仔细检查发现图片的 base64 编码是在 default 属性里面，如下：

Module {default: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAA…LGcWTnrPs8HKz6/8FGADjS7ldZb/fjwAAAABJRU5ErkJggg==', __esModule: true, Symbol(Symbol.toStringTag): 'Module'}

第一种方法：

将头像上传到自己的服务器上，使用线上的文件就能成功显示

icon: `https://images.weserv.nl/?url=cdn.hbtap.cn/%E5%A4%B4%E5%83%8F${i + 1}.png`,

第二种方法：

因为图片的 base64 编码是在 default 属性里面
在此进行 require 进行引入图片时，加入 default 即可，代码如下：
例如

<img src={require('./cs.jpg').default}/>

icon: require(`../../assets/images/头像${i + 1}.png`).default

加入.default 后图片进行正常显示.