如何在 v-img 加载错误的情况下显示“图像未找到”图像

Question

查看此代码笔以进行简单的 vuetify 设置。

https://codepen.io/khoulaiz/pen/gObJPxO?editors=1010

<template>
  <div id="app">
    <v-app>
      <v-content>
        <v-container>
          <v-row>
            <v-col v-for="i in images" :key="i" cols="4">
              <v-img max-height="150" max-width="150" :src="i" @error="errorHandler"/>
            </v-col>
          </v-row>
        </v-container>
      </v-content>
    </v-app>
  </div>
</template>

<scritp>
  new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data: () => ({
      images: [
        "https://via.placeholder.com/150",
        "https://via.placeholder.com/doesnotexist",
        "https://via.placeholder.com/152"
      ]
    }),
    methods: {
      errorHandler(url) {
        images[1] = "https://via.placeholder.com/151"
        this.$forceUpdate()
    }
  }
})
</script>

中间的图片将无法加载。我有一个错误处理程序，我想用工作图像替换失败图像的 src 属性，并且我想强制重新加载图像。

我能够替换失败图像的 src，但我尝试强制重新加载 v-img 的所有尝试都失败了。

为什么我没有得到对无法加载的 v-img 的引用？相反，我得到了失败的 url，这无助于我找到失败的元素。 :-(

请告诉我，如何强制第二张图片显示备用图片。请注意，图像应该是 v-for 循环的一部分。

Answer 1

您需要使用 this.

将您的 errorHandler 更改为以下内容应该可以解决问题

errorHandler(url) {
  this.images[1] = "https://via.placeholder.com/151"
  this.$forceUpdate()
} 

Answer 2

您可以使用ref，这样您就可以轻松访问您的html 对象。如下所示

 <v-col v-for="i in images" :key="i" cols="4">
          <v-img max-height="150" max-width="150" :src="i" :ref="'img_' + i" @error="errorHandler(i)"/>
 </v-col>

您需要设置唯一的 ref 并将该唯一的 ref 传递给 errorHandler 参数。

从您的 errorHandler 中，您可以获取该参数并通过设置新 src 的 ref 检索图像对象 dom

errorHandler(i) {
    this.$refs['img_' + i][0].src = "https://via.placeholder.com/151"
}