Tengo una lista de filas de tablas de datos representadas en Vue3 con una directiva v-for. En cada fila hay una etiqueta con una URL src a la imagen en línea. Cada vez que la URL de la imagen está rota (la imagen ya no existe), me gustaría que la URL src cambie a un valor predeterminado.
Con jQuery podría hacer lo siguiente:
$('img').on("error", function() { $(this).attr('src', 'fallbackURL'); });¿Cómo puedo hacer algo similar en Vue3? Estoy buscando la solución más ligera posible, ya que podría haber muchas filas y muchas URL de imágenes rotas. No me importaría mantener esta solución jQuery pero no sé cómo implementarla en Vue.
¡Muy agradecido por cualquier ayuda!
No es necesario usar Vue en este caso, hay una solución nativa:
<img src="..." onerror="this.onerror=null; this.src='Default.jpg'" />
puede hacerlo así usando @error y poner la función que desea si la imagen no se encuentra o está rota, luego cambie el src a la imagen predeterminada.
Pruébalo de esta manera.
Uso esto como imagen predeterminada -> https://i.ibb.co/5908vXL/Screenshot-from-2021-06-15-11-13-44.png
<script src="https://unpkg.com/vue"></script> <div id="app"> <img src="test.png" @error="imageLoadOnError"/> </div> <script> new Vue({ el: '#app', methods: { imageLoadOnError(e) { e.target.src = "https://i.ibb.co/5908vXL/Screenshot-from-2021-06-15-11-13-44.png" } } }) </script>