React项目中使用变量方式动态加载本地图片

2023-05-10

React项目中加载本地图片，主要有两种方式。

第一种：import 

import icon_vip from '@assets/images/vip_min.png';

<img src={icon_vip} />

第二种：require

<img src={'@assets/images/vip_min.png'} />

import和require加载图片路径不能完全是变量，但可以是由变量和字符拼接的字符串。

const uuid = 123;

// 错误
const cover = '@assets/mindmap/' + uuid + '.jpg'
<img src={require(cover)} />


// 正确
<img src={require('@assets/mindmap/' + uuid + '.jpg')} />

基础原理是便于解释器读出资源路径，能够应用于打包。

（版权归cpury.com所有，转载请注明出处。）

WEB开发