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

Tengo un caso en el que en mi Vue.jscon la webpackaplicación web, 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 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 lo 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 las rutas de archivo reales, no funciona.

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

Conseguí que esto funcione 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 utilizará webpack para que no tenga que usarla 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. 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 la requirefunción. Me gusta esto:

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

Hay otra forma de hacerlo agregando sus archivos de imagen a la carpeta pública en lugar de activos y accediendo a ellos como imágenes estáticas.

<img :src="'/img/' + pic + '.png'" v-bind:alt="pic" >

Aquí es donde debe colocar sus imágenes estáticas:

Su mejor opción 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 haz lo siguiente dentro de tu 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 puse la imagen al srclado de la imagen):

https://jsfiddle.net/q2rzssxr/

También encontré este problema y parece que las dos respuestas más votadas funcionan, pero hay un pequeño problema, el paquete web arroja un error en la consola del navegador (Error: No se puede encontrar el módulo './undefined' en webpackContextResolve) que no es muy agradable.

Así que lo resolví de manera un poco diferente. Todo el problema con la variable dentro de la declaración require es que la declaración require se ejecuta durante la agrupación y la variable dentro de esa declaración aparece solo durante la ejecución de la aplicación en el navegador. Entonces, el paquete web ve la imagen requerida como indefinida de cualquier manera, ya que durante la compilación esa variable no existe.

Lo que hice fue colocar una imagen aleatoria en la declaración require y ocultar esa imagen en css, para que nadie la vea.

// template
<img class="user-image-svg" :class="[this.hidden? 'hidden' : '']" :src="userAvatar" alt />

//js
data() {
  return {
    userAvatar: require('@/assets/avatar1.svg'),
    hidden: true
  }
}

//css
.hidden {display: none}

La imagen viene como parte de la información de la base de datos a través de Vuex y se asigna al componente como un

computed: {
  user() {
    return this.$store.state.auth.user;
  }
}

Entonces, una vez que esta información está disponible, cambio la imagen inicial a la real

watch: {
  user(userData) {
    this.userAvatar = require(`@/assets/${userData.avatar}`);
    this.hidden = false;
  }
}

Aquí hay una respuesta muy simple. :RE

<div class="col-lg-2" v-for="pic in pics">
   <img :src="`../assets/${pic}.png`" :alt="pic">
</div>

Puede usar try catch block para ayudar con las imágenes no encontradas

getProductImage(id) {
          var images = require.context('@/assets/', false, /\.jpg$/)
          let productImage = ''
          try {
            productImage = images(`./product${id}.jpg`)
          } catch (error) {
            productImage = images(`./no_image.jpg`)
          }
          return productImage
},

<img src="../assets/graph_selected.svg"/>

Webpack resuelve la ruta estática como una dependencia del módulo a través del cargador. Pero para la ruta dinámica que necesita usar require para resolver la ruta. Luego puede cambiar entre imágenes usando una variable booleana y una expresión ternaria.

<img :src="this.graph ? require( `../assets/graph_selected.svg`) 
: require( `../assets/graph_unselected.svg`) " alt="">

Y, por supuesto, alternar el valor del booleano a través de algún controlador de eventos.

Bueno, la mejor y más fácil forma que funcionó para mí fue esta de la cual estaba obteniendo datos de una API.

methods: {
       getPic(index) {
    return this.data_response.user_Image_path + index;
  }
 }

el método getPic toma un parámetro que es el nombre del archivo y devuelve la ruta absoluta del archivo, tal vez de su servidor con el nombre de archivo simple ...

aquí hay un ejemplo de un componente donde usé esto:

<template>
    <div class="view-post">
        <div class="container">
     <div class="form-group">
             <label for=""></label>
             <input type="text" class="form-control" name="" id="" aria-describedby="helpId" placeholder="search here">
             <small id="helpId" class="form-text user-search text-muted">search for a user here</small>
           </div>
           <table class="table table-striped ">
               <thead>
                   <tr>
                       <th>name</th>
                       <th>email</th>
                       <th>age</th>
                       <th>photo</th>
                   </tr>
                   </thead>
                   <tbody>
                       <tr v-bind:key="user_data_get.id"  v-for="user_data_get in data_response.data">
                           <td scope="row">{{ user_data_get.username }}</td>
                           <td>{{ user_data_get.email }}</td>
                           <td>{{ user_data_get.userage }}</td>
                           <td><img :src="getPic(user_data_get.image)"  clas="img_resize" style="height:50px;width:50px;"/></td>
                       </tr>

                   </tbody>
           </table>
        </div>

    </div>
</template>

<script>
import axios from 'axios';
export default {
     name: 'view',
  components: {

  },
  props:["url"],
 data() {
     return {
         data_response:"",
         image_path:"",
     }
 },
 methods: {
       getPic(index) {
    return this.data_response.user_Image_path + index;
  }
 },
 created() {
     const res_data = axios({
    method: 'post',
    url: this.url.link+"/view",
   headers:{
     'Authorization': this.url.headers.Authorization,
     'content-type':this.url.headers.type,
   }
    })
    .then((response)=> {
        //handle success
      this.data_response = response.data;
      this.image_path = this.data_response.user_Image_path;
       console.log(this.data_response.data)
    })
    .catch(function (response) {
        //handle error
        console.log(response);
    });
 },
}
</script>


<style scoped>

</style>

Encontré el mismo problema. Esto funcionó para mí al cambiar '../assets/' a './assets/'.

 <img v-bind:src="'./assets/' + pic + '.png'" v-bind:alt="pic">

Intente importar una imagen como esta, porque Webpack debería conocer su dependencia

    <ul>
              <li v-for="social in socials" 
              v-bind:key="social.socialId"
              >

                <a :href="social.socialWeb" target="_blank">
                  <img class="img-fill" :id="social.socialId" :src="social.socialLink" :alt="social.socialName">
                </a>
              </li>

            </ul>

<script>
        import Image1 from '@/assets/images/social/twitter.svg'
        import Image2 from '@/assets/images/social/facebook.svg'
        import Image3 from '@/assets/images/social/rss.svg'
        export default {
          data(){
            return{
              socials:[{         
                   socialId:1,         
                   socialName: "twitter",
                   socialLink: Image1,
                   socialWeb: "http://twitter.com"
              },
      {
          socialId:2,
          socialName: "facebook",
           socialLink: Image2,
           socialWeb: "http://facebook.com"

      },
      {
          socialId:3,
          socialName: "rss",
           socialLink: Image3,
           socialWeb: "http://rss.com"
      }]

 </script>