如何在Vuetify的v-img中做一个后备img？答案

【问题标题】：How to do a fallback img in v-img in Vuetify?如何在Vuetify的v-img中做一个后备img？
【发布时间】：2019-04-12 09:27:50
【问题描述】：

在 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 也会在控制台中引发错误。但后备图片不显示。

我该如何解决这个问题？

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

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component vuetify.js

【解决方案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] 图片加载失败

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

我喜欢@maurilio-atila 所做的。在我的情况下，图像来自另一台服务器，我最终这样做了：

 <v-img :src="`${item.image ?`https://some/endpoint/${item.image}` : '/fallback.png'}`"/>

虽然它不处理 v-on:error，但它会避免它。

【讨论】：

【解决方案4】：

这已在 github 上提出，应在 Vuetify 3 中添加

这是我同时解决这个问题的方法

我先创建两个数据

data(): {
 avatarLoadingFailed: false,
 fallbackAvatar: fallbackAvatar,
}

fallbackAvatar是我想在加载失败时显示的图像文件

然后我创建一个计算来保存要显示的头像

computed: {
  avatar() {
    return this.avatarLoadingFailed
      ? this.fallbackAvatar
      : this.getUserAvatar;
  },
}

终于在我的template标签中

// @error="avatarLoadingFailed = true" works fine as well
<v-img :src="avatar" v-on:error="avatarLoadingFailed = true"/>

我已经在 VueJS 中使用 typescript 和 VanillaJS 进行了尝试和测试

【讨论】：