vue for循环时require动态路径图片不存怎么使用默认图片
时间: 2023-09-18 21:11:21 浏览: 96
在 Vue 的 `v-for` 循环中,如果动态路径的图片不存在,可以使用 `v-on:error` 监听图片加载错误事件,然后在事件处理函数中设置一个默认图片的路径,例如:
```html
<template>
<div>
<img v-for="(image, index) in images"
:key="index"
:src="image.src"
@error="handleImageError(image)">
</div>
</template>
<script>
export default {
data() {
return {
images: [
{ src: 'path/to/image1.png' },
{ src: 'path/to/image2.png' },
{ src: 'path/to/missing-image.png' },
{ src: 'path/to/image3.png' }
],
defaultImage: 'path/to/default-image.png'
}
},
methods: {
handleImageError(image) {
image.src = this.defaultImage;
}
}
}
</script>
```
在上面的示例中,如果图片加载失败,`handleImageError` 方法会将图片的路径设置为默认图片的路径。这样就能够在图片不存在时使用默认图片了。
阅读全文