如果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的参考？相反，我得到了失败的网址，这并不能帮助我找到失败的元素。：-（

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

Answer 1

您可以使用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>

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

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

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

Answer 2

您需要使用this访问图像。

将errorHandler更改为以下应该可以做到这一点

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