javascript - 如何在Vuetify中的v-img中进行后备img？

在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在控制台中也会引发错误。但不会显示后备图片。
我怎样才能解决这个问题？
上面的主图像故意有一个错误的链接，但是如果我使用一个好的链接，则会显示出来。

最佳答案

您可以将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/[email protected]/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>

检查这个pen

编辑

我为所需的图像提供了无效的图像链接，在这种情况下，我们将出现一个异常，该异常将在console中显示:



在这种情况下，我们将加载具有有效链接的其他图像