Image图片的引入



  • state = {url: '../../image/xx.png'}

    1. <Image src={require(this.state.url)}></Image>//有问题,报错
    2. <Image src={require('../../image/xx.png')}></Image>// 正常显示
    3. <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目录下。


登录后回复