Как отобразить изображение «не найден» в случае ошибок загрузки 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>

Среднее изображение не загружается. У меня есть обработчик ошибок, в котором я хотел бы заменить атрибут sr c неисправного изображения рабочим изображением и в котором я хотел бы принудительно перезагрузить изображение.

Я могу заменить sr c неисправного изображения, но мне не удается все мои попытки принудительно перезагрузить v-img.

Почему я не могу получить ссылку на V-IMG, который не загружается? Вместо этого я получаю неверный URL, который не помогает мне найти неисправный элемент. : - (

Скажите, пожалуйста, как я могу заставить второе изображение отображать резервную копию. Обратите внимание, что изображение должно быть частью v-for l oop.

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>

Вам необходимо установить уникальные ссылки и передать этот уникальный параметр параметру errorHandler.

Из вашего errorHandler вы можете взять этот параметр и получить объект изображения dom по ссылке из этого набора. новый ср c

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