Vue.las imágenes dinámicas de js no funcionan

Tengo un caso en el que en mi Vue.js con webpack aplicación web, necesito mostrar imágenes dinámicas. Quiero mostrar img dónde se almacenan los nombres de archivo de las imágenes en una variable. Esa variable es una propiedad computed que devuelve una variable de almacén Vuex, que se rellena de forma asíncrona en beforeMount.

<div class="col-lg-2" v-for="pic in pics">
   <img v-bind:src="'../assets/' + pic + '.png'" v-bind:alt="pic">
</div>

Sin embargo, funciona perfectamente cuando lo hago: 

<img src="../assets/dog.png" alt="dog">

Mi caso es similar a este fiddle , pero aquí funciona con URL img, pero en el mío con rutas de archivo reales, lo hace no trabajo.

¿Cuál debería ser la forma correcta de hacerlo?

Author: Saurabh, 2016-11-08
Source

3 answers

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="getImgUrl(pic)" v-bind:alt="pic">
</div>

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

 31
Author: Saurabh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-11-08 17:30:26

Lo mejor es usar un método simple para construir la cadena correcta para la imagen en el índice dado: 

methods: {
  getPic(index) {
    return '../assets/' + this.pics[index] + '.png';
  }
}

Luego haga lo siguiente dentro de su v-for: 

<div class="col-lg-2" v-for="(pic, index) in pics">
   <img :src="getPic(index)" v-bind:alt="pic">
</div>

Aquí está el JSFiddle (obviamente las imágenes no se muestran, así que he puesto la imagen src al lado de la imagen):

Https://jsfiddle.net/q2rzssxr /

 8
Author: craig_h,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-11-08 16:57:43

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

HTML: 

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

Método Vue: 

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

Y encuentro que los primeros 2 párrafos en aquí explican ¿por qué funciona? bueno.

Tenga en cuenta que es una buena idea poner las imágenes de su mascota dentro de un subdirectorio, en lugar de introducirlas con todos los demás activos de imagen. Así: ./assets/pets/

 4
Author: Grigio,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-11-24 21:35:54