【Taro】Taro中jsx文件引入本地图片资源的方式

新建项目

• taro init myProject，创建模板项目
• npm run dev:weapp，编译
• 将编译生成的dist目录导入微信开发者工具
  

改造项目：jsx中引入本地图片资源

接下来，我们来改造下这个简单的demo，依次做这两件事：

• 第一件：在src目录下新建文件夹assets，继续新建子文件夹images，将准备好的四张图片放入images里；
• 第二件：修改index.jsx文件，在组件中引入这四张图片

// index.jsx
import React, { Component } from 'react'
import { View, Image } from '@tarojs/components'

export default class Index extends Component {
  render () {
    return (
      <View className='index'>
        <Image src="../../assets/images/1.png"/>
        <Image src="../../assets/images/2.png"/>
        <Image src="../../assets/images/3.png"/>
        <Image src="../../assets/images/4.png"/>
      </View>
    )
  }
}

遇到问题：Taro无法使用相对路径引用本地图片

编译完成后，微信小程序端也会自动编译加载，在console里我们看到了一片红：[渲染层网络层错误] Failed to load local image resource /assets/images/4.png。这是因为Taro不能直接引用本地静态资源，只能通过网络地址或Base64的方式进行资源引用，详见这里。

解决问题

针对以上问题，有两种解决方式。

• 方式1：使用require()

// index.jsx
import React, { Component } from 'react'
import { View, Image } from '@tarojs/components'

export default class Index extends Component {
  render () {
    return (
      <View className='index'>
        <Image src={require("../../assets/images/1.png")}/>
        <Image src={require("../../assets/images/2.png")}/>
        <Image src={require("../../assets/images/3.png")}/>
        <Image src={require("../../assets/images/4.png")}/>
      </View>
    )
  }
}

• 方式2：使用import

// index.jsx
import React, { Component } from 'react'
import { View, Image } from '@tarojs/components'
import pic1 from "../../assets/images/1.png";
import pic2 from "../../assets/images/2.png";
import pic3 from "../../assets/images/3.png";
import pic4 from "../../assets/images/4.png";
export default class Index extends Component {
  render () {
    return (
      <View className='index'>
        <Image src={pic1}/>
        <Image src={pic2}/>
        <Image src={pic3}/>
        <Image src={pic4}/>
      </View>
    )
  }
}

看看效果，如下所示：

哈哈哈哈哈~~