Событие ошибки Bootstrap Vue в изображении - PullRequest
Новая
       21

Событие ошибки Bootstrap Vue в изображении

0 голосов
/ 04 февраля 2019

Как я могу использовать событие @ onerror в b-card Bootstrap Vue?

Я хочу обработать изображение 404, чтобы я мог отобразить изображение по умолчанию.

 <b-card overlay
   :title="name"
   :sub-title="description"
   :img-src="cardImg"
   img-top
   style="max-width: 20rem;"
   class="mb-2">
</b-card>

Ответы [ 2 ]

0 голосов
/ 19 февраля 2019

Я бы рекомендовал разместить компонент <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>

Для справки по вышеуказанным компонентам см.

0 голосов
/ 04 февраля 2019

Что ж, этот компонент, похоже, не предоставляет этот конкретный обработчик событий (на момент написания), но вы можете добавить ref к компоненту и зарегистрировать обработчик ошибок на mounted hook: 

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