Image图片的引入

jd_61118b9c9b0c0

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' }
]

jd_61118b9c9b0c0

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>)
}

15683637638_p

先导入要使用的图片

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目录下。