Image图片的引入
-
state = {url: '../../image/xx.png'}
- <Image src={require(this.state.url)}></Image>//有问题,报错
- <Image src={require('../../image/xx.png')}></Image>// 正常显示
- <Image src='../../image/xx.png'></Image>//图片加载了,不显示不报错
需求:遍历数组(包含图片的url),渲染一个列表
[
{ image:'../../images/banner/banner01.jpg' },
{ image:'../../images/banner/banner02.jpg' }
]
-
state = { list :[ { image:'.banner01.jpg' }, { image:'banner02.jpg' } ] } /******************/ { let { list } = this.state list.map((item,i)=><Image src=`../../images/banner/${list.image}` key={i}></Image>) }
-
先导入要使用的图片
import yourImg from './imgpath/imgName.png';
再使用图片
<Image src={yourImg}/>
如果你的图片名称是通过计算得出了,请使用require.context
const imgContext = require.context('./imgPath/', false, /\.(png|jpg|gif)$/); const computeImgName = ()=>{....}; //返回的图片名称确保在/imgPath下,名称前确保加上'./' <Image src={imgContext(computeImgName())} />
taro在打包时,会将小图片直接转换成base64的字符串,直接嵌入到html中,只有大图片,才会输出到/static/images目录下。