时间戳

首页 > 解决方案 > 如何在Vuetify的v-img中做一个后备img？

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还会在控制台中引发错误。但是后备图像没有显示。

我怎样才能解决这个问题？

上面的主图故意有一个坏链接，但如果我使用一个好的链接，它就会显示出来。

标签： javascriptvue.jsvuejs2vue-componentvuetify.js

解决方案

您可以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>

检查这支笔

编辑

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

“[Vuetify] 图片加载失败

在这种情况下，我们将加载另一个带有有效链接的图像

推荐阅读