在 Vue 中,如果使用 img
标签来显示图片,并且图片链接失效时需要显示默认图片,可以使用 onerror
事件来实现。
以下是一个示例代码:
<template>
<img :src="imageUrl" alt="图片" @error="handleError">
</template>
<script>
export default {
data() {
return {
imageUrl: 'http://example.com/invalid.jpg',
defaultImageUrl: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.7Hy8znZ01pyCwN8l6zDWVwAAAA?pid=ImgDet&rs=1'
}
},
methods: {
handleError(event) {
event.target.src = this.defaultImageUrl
}
}
}
</script>
在上面的代码中,我们首先加载了一个无效的图片链接 http://example.com/invalid.jpg
,然后指定了一个默认图片链接 http://example.com/default.jpg
。在模板中,我们使用 img 标签来显示图片,并将 src 属性绑定到 imageUrl
变量上。当图片加载失败时,会触发 @error 事件,我们可以在事件处理函数中将 src 属性修改为默认图片链接。
需要注意的是,在一些情况下,比如 src 属性本身就为空或者是一个相对路径,可能无法触发 @error
事件。为了避免这种情况,建议在加载图片前进行判断,保证 src 属性是一个有效的链接。