taro-批量引入静态图片资源（react）

taro批量引入静态图片

如果是taro1.x或者react直接建议使用commonJS写法<Image src={require('./assets/delivery.png')}/>，如果像集中管理的话也可以考虑如下方法
由于taro2.x，3.x不支持commonJS写法，所以类似于这种写法<Image src={require('./assets/delivery.png')}/>，虽然系统不报错，但是却渲染不出图片，
所以我们在一些icon比较多的页面中只能使用es6语法import XX from ‘./xx.png’引入静态资源.
如果只用形如这种的

import leftArrow from './assets/left-arrow.png'
import newbg from './assets/newbg.png'
import position from './assets/position.png'
import waitpay from './assets/waitpay.png'
import waitpost from './assets/waitpost.png'
import waitget from './assets/waitget.png'
import dealsuccess from './assets/dealsuccess.png'
import dealfail from './assets/dealfail.png'
import bluecar from './assets/bluecar.png'

会使页面代码杂乱，而且不合乎常理，
我们可以考虑新建一个文件来集中管理并且集中导出这些图片资源

export {default as address} from './assets/address.png';
export {default as evaluate} from './assets/evaluate.png';
export {default as get} from './assets/get.png';
export {default as img} from './assets/img.png';
export {default as integral} from './assets/integral.png';
export {default as integralImg} from './assets/integral-img.png';
export {default as message} from './assets/message.png';
export {default as pay} from './assets/pay.png';
export {default as post} from './assets/post.png';
export {default as return} from './assets/return.png';
export {default as rightArrow} from './assets/right-arrow.png';
export {default as service} from './assets/service.png';
export {default as setting} from './assets/setting.png';
export {default as leftArrow} from './assets/left-arrow.png';

在页面中引入

import * as images from './module'

使用

直接使用

<Image  src = {images.pay}/>

这样管理代码就十分清晰了
PS ts与js类似，关于静态资源引入是一样的代码，使用无需改动