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

Posted 2023-02-23

【中文标题】如何在Vuetify的v-img中做一个后备img？

【英文标题】：How to do a fallback img in v-img in Vuetify?

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

我该如何解决这个问题？

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

【参考方案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 进行了尝试和测试