新建项目
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>
)
}
}
看看效果,如下所示:
哈哈哈哈哈~~