web-dev-qa-db-fra.com

Vuejs - Vérifiez si l'url de l'image est valide ou cassée

C'est exactement la même chose que Angular 2 - Vérifiez si l'url de l'image est valide ou cassée .

comment puis-je implémenter cela dans vuejs?

javascriptvue.jsvuejs2vue-component
12
boombamboo

Vue.js a un @error événement auquel vous pouvez vous connecter. De vuejs numéro # 3261 . Vous pourriez donc faire:

<template>
   <img :src="avatarUrl" @error="imageLoadError" />
</template>

<script>
export default {
  methods: {
    imageLoadError () {
      console.log('Image failed to load');
    }
  }
};
</script>

Edit : J'ai découvert que cela fonctionne aussi pour <audio> tags (et je soupçonne d'autres éléments qui définissent un attribut src et chargent un élément)!

23
kano

Il semble que @error fonctionne bien. J'ai personnellement utilisé une méthode avec un événement afin de définir une image alternative.

<img :src="image" @error="imageUrlAlt">

La méthode:

imageUrlAlt(event) {
    event.target.src = "alt-image.jpg"
}

De vuejs numéro # 5404 .

4
Jakub A Suplicki

J'utilise une propriété calculée qui renvoie une chaîne avec l'URL de l'espace réservé au lieu du gestionnaire @error comme celui-ci. De cette façon, si la source est nulle ou non définie, l'espace réservé sera chargé.

<img :src="source || computedPropertyString" />
1
alansaldivar