Las imágenes dinámicas de Vue.js no funcionan con el paquete web
Tengo un caso en el que en mi Vue.jsaplicación webpackweb necesito mostrar imágenes dinámicas. Quiero mostrar imgdónde se almacenan los nombres de archivo de las imágenes en una variable. Esa variable es una computedpropiedad que devuelve una Vuexvariable de tienda, que se completa de forma asincrónica 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 solo hago:
<img src="../assets/dog.png" alt="dog">
Mi caso es similar a este violín. , pero aquí funciona con la URL de img, pero en el mío con rutas de archivos reales, no funciona.
¿Cuál debería ser la forma correcta de hacerlo?
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ó.
Aquí hay una abreviatura que usará el paquete web para que usted 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 aquí explican por qué esto funciona? Bueno.
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 los demás recursos de imágenes. Al igual que:./assets/pets/
Puedes probar la requirefunción. como esto:
<img :src="require(`@/xxx/${name}.png`)" alt class="icon" />
El @símbolo apunta al srcdirectorio.
fuente: reglas de transformación de URL de Vue
