Как сделать запасной img в v-img в vuetify?

Question

В vuetify у меня есть v-img, и я хочу изменить изображение на запасное, если основное не удается.

<v-img :src="cPicture" contain v-on:error="onImgError"></v-img>


cPicture : function() {
            return this.failed_image ? "https://assets.dryicons.com/uploads/icon/svg/9872/ab3c0a16-6f14-4817-a30b-443273de911d.svg" : "http://myimg.jpg/";
        },


onImgError : function(event) {
            alert(1);
            this.failed_image = true;
            //this.$forceUpdate();
        },

предупреждение 1 происходит. Vuetify также выдает ошибку в консоли. Но запасное изображение не показывает.

Как я могу это исправить?

Основное изображение, приведенное выше, намеренно содержит плохую ссылку, но если я использую хорошую ссылку, она будет показана.

Спасибо

Answer 1

Вы можете использовать cPicture как вычисляемое свойство и onImgError как метод:

new Vue({
  el: '#app',
  data() {
    return {
      failed_image: false
    }
  },
  computed: {
    cPicture: function() {
      return this.failed_image ? "https://picsum.photos/500/300?image=4" : "https://pisum.photos/500/300?image=5";
    },



  },
  methods: {
    onImgError: function(event) {

      this.failed_image = true;

    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.3.7/dist/vuetify.min.js"></script>

<div id="app">
  <v-app id="inspire">
    <v-layout>
      <v-flex xs12 sm6 offset-sm3>
        <v-card>
          <v-container grid-list-sm fluid>
            <v-img :src="cPicture" contain v-on:error="onImgError"></v-img>
          </v-container>
        </v-card>
      </v-flex>
    </v-layout>
  </v-app>
</div>

отметьте это ручка

EDIT

Я предоставил недействительную ссылку на изображение для желаемого изображения, в этом случае у нас будет исключение, которое будет показано в консоли:

"[Vuetify] Загрузка изображения не удалась

в этом случае мы загрузим другое изображение с действительной ссылкой