如何在 Vuetify 的 v-img 中做后备 img? [英] How to do a fallback img in v-img in Vuetify?

问题描述

在 Vuetify 中，我有一个 v-img，如果主图像失败，我想将图像更改为后备图像.

警报 1 发生.Vuetify 也会在控制台中引发错误.但是后备图片没有显示.

我该如何解决这个问题?

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

解决方案

你可以使用 cPicture 作为计算属性和 onImgError 作为方法:

new Vue({el: '#app',数据() {返回 {failed_image: 假}},计算:{c图片:函数(){返回 this.failed_image ?"https://picsum.photos/500/300?image=4" : "https://pisum.photos/500/300?image=5";},},方法: {onImgError:函数(事件){this.failed_image = true;}}})

<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></脚本><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="应用程序"><v-app id="inspire"><v-布局><v-flex xs12 sm6 offset-sm3><v-card><v-container grid-list-sm 流体><v-img :src="cPicture" 包含 v-on:error="onImgError"></v-img></v-容器></v-card></v-flex></v-layout></v-app>

检查这个pen

编辑

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

<块引用>

"[Vuetify] 图片加载失败

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

In Vuetify I have a v-img, and I want to change the image to a fallback one if the main one fails.

<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();
        },

the alert 1 happens. Vuetify also throws an error in the console. But the fallback image does not show.

How can I fix this?

The main image above has intentionally a bad link, but if I use a good link, it will be shown.

解决方案

You could use cPicture as a computed property and onImgError as a method :

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>

check this pen

EDIT

I had provided an invalid image link for the desired image, in this case we will have an exception which will be shown in console :

"[Vuetify] Image load failed

in this case we will load another image with a valid link

这篇关于如何在 Vuetify 的 v-img 中做后备 img?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！