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>

选中此pen

编辑

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

“ [Vuetify]图片加载失败

在这种情况下，我们将加载具有有效链接的另一张图片

Answer 2

我做同样的事情，但代码更少。

<v-img tile :src="logo.url" v-on:error="logo.url='/logo.svg'" />

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

2 个答案: