问题复现:
img标签直接动态绑定图片的相对路径的时候,图片不能正常显示。代码如下所示
<view style="margin: 20rpx" v-for="(item, index) in showSampleImage" :key="index">
<u-image :src="item.src" :width="item.width" :height="item.height"></u-image>
</view>
showSampleImage: [{
src: "../sampleImage/1.jpg",
width: "311",
height: "148",
},
{
src: "../sampleImage/2.jpg",
width: "311",
height: "148",
},
]
原因:
动态地址,路径被加载器解析为字符串,所以图片找不到
解决方法:
设置绝对路径或者相对路径是改为用 require 引入才能成功,就可以动态使用了。
showSampleImage: [{
src: require("../sampleImage/1.jpg"),
width: "311",
height: "148",
},
{
src: require("../sampleImage/1.jpg"),
width: "311",
height: "148",
},
],