taro-批量引入静态图片资源(react)

taro批量引入静态图片

如果是taro1.x或者react直接建议使用commonJS写法,如果像集中管理的话也可以考虑如下方法
由于taro2.x,3.x不支持commonJS写法,所以类似于这种写法,虽然系统不报错,但是却渲染不出图片,taro-批量引入静态图片资源(react)_第1张图片
所以我们在一些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'

taro-批量引入静态图片资源(react)_第2张图片
会使页面代码杂乱,而且不合乎常理,
我们可以考虑新建一个文件来集中管理并且集中导出这些图片资源
taro-批量引入静态图片资源(react)_第3张图片

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'

使用
在这里插入图片描述
直接使用


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

你可能感兴趣的:(taro-多端开发)