图像中的 Bootstrap Vue onerror 事件

Posted 2023-02-22

【中文标题】图像中的 Bootstrap Vue onerror 事件

【英文标题】：Bootstrap Vue onerror event in image

【发布时间】：2019-06-27 19:30:06

【问题描述】：

如何在 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>

【参考方案1】：

我建议将 <b-img-lazy> 组件放在带有 no-body 属性集的 <b-card> 内。

<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>

有关上述组件的参考，请参阅：

https://bootstrap-vue.js.org/docs/components/card#kitchen-sink-example https://bootstrap-vue.js.org/docs/components/image

【讨论】：

这一定是延迟加载的img有什么特别的原因吗？这也应该是公认的答案。

<b-img-lazy> 没有主要原因，只是它在尝试加载最终图像之前显示了default 图像。我们计划添加一个错误处理程序来检测最终图像何时无法加载。

【参考方案2】：

好吧，这个组件似乎没有提供这个特定的事件处理程序（在撰写本文时），但您可以在组件上添加一个 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';
    
  
);

或者实际上，创建一个提供一个包装器组件。

./components/Card.vue

<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>

index.html

<div id="app">
  <card @onerror="handleImgError"></card>
</div>