vue 图片404 替换默认图
时间: 2023-09-06 09:01:55 浏览: 60
在Vue中,可以使用`v-bind`指令来绑定图片的属性值。如果图片无法加载(即返回404错误),可以通过在`<img>`标签中添加`v-on:error`事件来处理。
首先,你需要在data中定义一个默认图片的路径,用于替换无法加载的图片。例如:`defaultImage: '默认图片路径'`。
然后,在模板中,使用`v-bind:src`指令将图片的路径绑定到一个data中的变量上,同时在`<img>`标签上添加`v-on:error`事件监听。
示例代码如下:
```html
<template>
<div>
<img v-bind:src="imagePath" v-on:error="handleImageError" alt="图片">
</div>
</template>
<script>
export default {
data() {
return {
imagePath: '图片路径',
defaultImage: '默认图片路径'
}
},
methods: {
handleImageError() {
this.imagePath = this.defaultImage;
}
}
}
</script>
```
在上述示例中,当`<img>`标签中的`src`属性所指定的图片无法加载时,会触发`handleImageError`方法。该方法会将`imagePath`变量更新为`defaultImage`,从而显示默认图片。
这样,在图片加载出错的情况下,就能够替换为默认图片。