如何在Bootstrap Vue的b-card
中使用@onerror事件?
我想处理图像的404,以便可以显示默认图像。
<b-card overlay
:title="name"
:sub-title="description"
:img-src="cardImg"
img-top
style="max-width: 20rem;"
class="mb-2">
</b-card>
答案 0 :(得分:1)
嗯,这个组件似乎没有提供特定的事件处理程序(在撰写本文时),但是您可以在组件上添加Link
并在ref
钩子上注册错误处理程序:
mounted
<b-card overlay
:title="name"
:sub-title="description"
:img-src="cardImg"
img-top
style="max-width: 20rem;"
class="mb-2"
ref="card">
</b-card>
或者实际上,创建一个提供一个包装器的包装器。
new Vue({
el: '#app',
mounted() {
this.$refs.card.querySelector('img').onerror = this.handleImgError;
},
methods: {
handleImgError(evt) {
// event has all the error info you will need
// evt.type = 'error';
}
}
});
<template>
<b-card
overlay
:title="name"
:sub-title="description"
:img-src="cardImg"
img-top
style="max-width: 20rem;"
class="mb-2">
</b-card>
</template>
<script>
import bCard from "bootstrap-vue/es/components/card/card";
export default {
name: "Card",
mounted() {
this.$el.querySelector("img").onerror = e => {
this.$emit('onerror', e);
};
},
components: {
bCard
}
};
</script>
答案 1 :(得分:1)
我建议使用<b-img-lazy>
道具集将<b-card>
组件放置在no-body
内。
<b-card no-body>
<b-img-lazy class="card-img-top" src="...." @error.native="onError" />
<b-card-body :title="name" :sub-title="description">
Card Text
</b-card-body>
</b-card>
有关上述组件的参考,请参阅: