vue for循环时 使用require动态路径本地图片不存在怎么使用默认图片
时间: 2023-12-19 16:05:52 浏览: 43
可以在v-bind中使用三元表达式,判断当前图片是否存在,若不存在则使用默认图片路径。示例代码如下:
```
<template>
<div>
<div v-for="(item, index) in imgList" :key="index">
<img :src="getImageUrl(item.imgUrl)" alt="图片">
</div>
</div>
</template>
<script>
export default {
data() {
return {
imgList: [
{ imgUrl: 'img1.png' },
{ imgUrl: 'img2.png' },
{ imgUrl: '' }
]
}
},
methods: {
getImageUrl(url) {
try {
return require(`@/assets/${url}`);
} catch (error) {
return require('@/assets/defaultImg.png');
}
}
}
}
</script>
```
以上代码中,`getImageUrl`方法会尝试获取图片路径`require(`@/assets/${url}`)`,若图片不存在则会捕获异常,返回默认图片路径`require('@/assets/defaultImg.png')`。