如何实现可以使用 el-image 的 error 事件进行监听,在事件处理函数中进行重新加载
时间: 2024-02-05 21:13:22 浏览: 248
详解elementui之el-image-viewer(图片查看器)
可以使用以下步骤实现:
1. 在 el-image 标签上绑定 error 事件,例如:
```html
<el-image src="your-image-url" @error="handleImageError"></el-image>
```
2. 定义 handleImageError 方法,该方法将会在图片加载失败时被调用。在该方法中,可以通过修改图片的 src 属性来重新加载图片,例如:
```javascript
methods: {
handleImageError(event) {
const img = event.target;
img.src = 'new-image-url';
}
}
```
注意,在修改图片的 src 属性时,需要将其赋值为一个新的图片地址,否则可能会陷入死循环中,不停地触发 error 事件。
阅读全文