1

Estou usando o carousel do vuetifyjs,eu estou consumindo uma api e ele funciona bem porem quando vem uma imagem que não existe ou quebrada, ele fica dando erro:

inserir a descrição da imagem aqui

Como faço para ele deixar uma imagem padrão para quando tiver erro e parar de dar esse erro no console?

        <v-carousel class="carrosel" xs6>
          <v-carousel-item
            v-for="(item, i) in p.images"
            :key="i"
            :src="item"
            aspect-ratio="5"
          ></v-carousel-item>
        </v-carousel>

1 Resposta 1

0

Use o atributo @error que vai invocar uma função ao dar um erro na imagem

new Vue({
  el: "#app",
  methods: {
  	errorImage( event ){
    
    	event.target.src = 'https://user-images.githubusercontent.com/24848110/33519396-7e56363c-d79d-11e7-969b-09782f5ccbab.png';
        console.clear();
      
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  
  <img :src="'http://www.naoexiste.com'" @error="errorImage" alt="">
  <img :src="'https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Unofficial_JavaScript_logo_2.svg/200px-Unofficial_JavaScript_logo_2.svg.png'" @error="errorImage" alt="">

  
</div>

Em relação ao erro no console é um comportamento padrão do navegador, então a única coisa que você pode fazer é limpar com console.clear();

2
  • Obrigada pela resposta mas infelizmente não funcionou, continua apontando o erro e não carrega a imagem de erro. Eu tinha tentando alguma coisa parecida com essa solução que tambem não funcionou. Não sei como me livrar desse erro e tratar com uma imagem padrão de imagem quebrada..
    – Isa
    7/06/2019 às 13:12
  • No exemplo acima você pode ver funcionando, basta esperar um pouco que a imagem de fallback irá aparecer (não sei porque demora tanto), e o console.clear() limpa o erro, mas assim, é realmente necessário essa funcionalidade? pq isso pode ser facilmente validado no back com um get_headers(PHP) ou métodos similares em outras linguagens. 8/06/2019 às 2:07

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .