Question

我正在使用Vuetify加载图像：

<v-img :src="this.imageUrl" :lazy-src="defaultImage" v-on:error="onError" :width="100" :height="150"></v-img>

data () {
  return {
    defaultImage: require('@/assets/images/defaultImage.png'),
    useFallbackImage: false
  }
},
computed: {
  imageUrl: function() {
    return !this.useFallbackImage ? `http://foo/v1.0/bar/${this.propId}` : this.defaultImage;
  }
},
methods: {
  onError: function() {
    this.useFallbackImage = true;
  }
}

我不知道该图像是否存在，所以我让浏览器尝试，如果不存在，则回退到默认值。效果很好，但是Vuetify烦人地在控制台上打印了一堆垃圾：

“ [Vuetify]图片加载失败...在...中找到”

我查看了源代码，并且每当出现错误时，即使在处理程序之前，它们似乎仍会不加选择地打印到控制台。但是我想我会尝试-有谁知道在这里抑制Vuetify的方法吗？

谢谢

Answer 1

您也许可以执行以下操作：

import VImg from 'vuetify/lib/components/VImg'

export default VImg.extend({
  name: 'VImageWrapper',
  methods: {
    onError() {
     // leave empty
    }
  }
})

来自此线程： https://github.com/vuetifyjs/vuetify/issues/6755

阻止将Vuetify打印到控制台“ [[Vuetify]图像加载失败”

1 个答案: