vue for循环时 使用require动态路径图片不存在怎么使用默认图片
时间: 2023-09-18 13:11:21 浏览: 170
解决vue的 v-for 循环中图片加载路径问题
5星 · 资源好评率100%
可以在v-bind中使用三元表达式,判断当前图片是否存在,若不存在则使用默认图片路径。示例代码如下:
```
<template>
<div>
<div v-for="(item, index) in imgList" :key="index">
<img :src="item.imgUrl ? require(`@/assets/${item.imgUrl}`) : require('@/assets/defaultImg.png')" alt="图片">
</div>
</div>
</template>
<script>
export default {
data() {
return {
imgList: [
{ imgUrl: 'img1.png' },
{ imgUrl: 'img2.png' },
{ imgUrl: '' }
]
}
}
}
</script>
```
以上代码中,`imgUrl`为空字符串时,会使用默认图片路径`require('@/assets/defaultImg.png')`。
阅读全文