微信小程序js中如何引用图片？

Question

js中定义了一个列表，列表中有图片，是本地的。
wxml中循环出来，展示图片和文字。

<view wx:for="{{styleList}}" class="styleItem" >
    <image class="styleImg" src="{{item.img}}"></image>
    <text class="styleText">{{item.name}}</text>
  </view>

js中

styleList:[
      {
        name: 'aaa',
        img: require('/assets/styles/aaa.jpeg'),
      },
    ],

但是这个require引用的提示不存在。
Error: module 'components/style/assets/styles/aaa.jpeg.js' is not defined, require args is '/assets/styles/aaa.jpeg'

Answer 1

icon: require('../../assets/images/warning.png'),

用这种路径试试

还不行的话

重启小程序开发工具

Answer 2

在微信小程序中，应该直接将图像路径作为字符串放入数据对象中。

styleList:[
{
name: 'aaa',
img: '/assets/styles/aaa.jpeg',
},
]

在你的wxml文件中，你可以这样引用图片：

<view wx:for="{{styleList}}" class="styleItem">
<image class="styleImg" src="{{item.img}}"></image>
<text class="styleText">{{item.name}}</text>
</view>

这里{{item.img}}将会被替换为你在数据对象中指定的图片路径。