Las imágenes dinámicas de vue.js no funcionan

Solución:

Conseguí que esto funcionara siguiendo el código

  getImgUrl(pet) {
    var images = require.context('../assets/', false, /.png$/)
    return images('./' + pet + ".png")
  }

y en HTML:

<div class="col-lg-2" v-for="pic in pics">
   <img :src="https://foroayuda.es/getImgUrl(pic)" v-bind:alt="pic">
</div>

Pero no estoy seguro de por qué mi enfoque anterior no funcionó.

Aquí hay una abreviatura que usará webpack para que no tenga que usar require.context.

HTML:

<div class="col-lg-2" v-for="pic in pics">
    <img :src="https://foroayuda.es/getImgUrl(pic)" v-bind:alt="pic">
</div>

Método Vue:

getImgUrl(pic) {
    return require('../assets/'+pic)
}

Y encuentro que los primeros 2 párrafos aquí explican ¿Por qué esto funciona? bien.

Tenga en cuenta que es una buena idea colocar las imágenes de su mascota dentro de un subdirectorio, en lugar de colocarlas junto con todos sus otros recursos de imagen. Al igual que: ./assets/pets/

Puedes probar el require función. como esto:

<img :src="https://foroayuda.es/require(`@/xxx/${name}.png`)" alt class="icon" />

---

---

Utiliza Nuestro Buscador