Estoy trabajando en un sitio que tiene una lista de productos. Cada producto tiene una imagen correspondiente. Estoy vinculando la url de la imagen al atributo de origen como a continuación.

<img :src="product.ImageUrl"/>

Si no se encuentra la imagen, quiero mostrar una imagen predeterminada.

Hago lo siguiente en la sintaxis de la maquinilla de afeitar cshtml (solo como referencia)

onerror='this.onerror = null;this.src = "@Url.Content("~/images/photo-not-available.jpg")";'

¿Cómo logro la misma en Vue?

10
Vishwas 28 feb. 2018 a las 23:22

3 respuestas

La mejor respuesta

Puede establecer una función de controlador onerror con @error en Vue:

<img :src="" @error="aVueFunctionThatChangesTheSrc">
11
ceejayoz 1 mar. 2018 a las 16:20

Descubrí que al cambiar el src en la función @error se inició un horrible e interminable ciclo de actualizaciones, causando una pantalla parpadeante, etc. Mi solución hasta ahora es:

<span v-if="props.column.field === 'avatar'">
  <span v-if="props.row.avatar">
    <img alt="avatar" class="round-32" :src="`${props.row.avatar}`" @error="(() => props.row.avatar = null)"/>
  </span>
  <span v-else>
    <img alt="avatar" class="round-32" src="../../../assets/images/avatar-2.jpg"/>
  </span>
</span>
1
Lynne Daniels 30 ene. 2019 a las 17:42

Puede usar v-if y v-else. me gusta

<div v-if="product.ImageUrl !== undefined">
   <img :src="product.ImageUrl"/>
</div>
<div v-else>
  <img :src="YOUR DEFAULT IMAGE PATH"/>
</div>
-3
Nik.Developer 1 mar. 2018 a las 09:47