Die dynamischen Bilder von Vue.j funktionieren nicht

Ich habe einen Fall , in dem in meinem Vue.jsmit webpackWeb - App, ich brauche dynamische Bilder anzuzeigen. Ich möchte zeigen, imgwo der Dateiname von Bildern in einer Variablen gespeichert ist. Diese Variable ist eine computedEigenschaft, die eine VuexGeschäftsvariable zurückgibt, die asynchron aufgefüllt wird beforeMount.

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

Es funktioniert jedoch perfekt, wenn ich es gerade tue:

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

Mein Fall ähnelt dieser Geige , aber hier funktioniert es mit der IMG-URL, aber in meinem Fall mit tatsächlichen Dateipfaden funktioniert es nicht.

Was sollte der richtige Weg sein, um es zu tun?

Ich habe dies durch folgenden Code zum Laufen gebracht

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

und in HTML:

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

Aber nicht sicher, warum mein früherer Ansatz nicht funktioniert hat.

Hier ist eine Abkürzung, die Webpack verwendet, damit Sie sie nicht verwenden müssen require.context.

HTML:

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

Vue-Methode:

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

Und ich finde, dass die ersten beiden Absätze hier erklären, warum dies funktioniert? Gut.

Bitte beachten Sie, dass es eine gute Idee ist, Ihre Haustierbilder in ein Unterverzeichnis zu stellen, anstatt sie mit all Ihren anderen Bildelementen zu verknüpfen. Wie so:./assets/pets/

Sie können die requireFunktion ausprobieren . so was:

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

Es gibt eine andere Möglichkeit, indem Sie Ihre Bilddateien anstelle von Assets zum öffentlichen Ordner hinzufügen und als statische Bilder darauf zugreifen.

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

Hier müssen Sie Ihre statischen Bilder platzieren:

Am besten verwenden Sie einfach eine einfache Methode, um die richtige Zeichenfolge für das Bild am angegebenen Index zu erstellen:

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

dann mache folgendes in deinem v-for:

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

Hier ist die JSFiddle (offensichtlich werden die Bilder nicht angezeigt, daher habe ich das Bild srcneben das Bild gestellt):

https://jsfiddle.net/q2rzssxr/

Ich bin auch auf dieses Problem gestoßen und es scheint, dass beide am besten bewerteten Antworten funktionieren, aber es gibt ein kleines Problem: Webpack wirft einen Fehler in die Browserkonsole (Fehler: Modul './undefined' kann bei webpackContextResolve nicht gefunden werden), was nicht sehr nett ist.

Also habe ich es etwas anders gelöst. Das gesamte Problem mit der Variablen in der require-Anweisung besteht darin, dass die require-Anweisung während der Bündelung ausgeführt wird und die Variable in dieser Anweisung nur während der App-Ausführung im Browser angezeigt wird. Daher sieht Webpack das erforderliche Bild in beiden Fällen als undefiniert an, da diese Variable während der Kompilierung nicht vorhanden ist.

Was ich getan habe, ist, ein zufälliges Bild in die Anforderung zu setzen und dieses Bild in CSS zu verstecken, damit niemand es sieht.

// 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}

Das Bild kommt als Teil der Informationen aus der Datenbank über Vuex und wird der Komponente als berechnet zugeordnet

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

Sobald diese Informationen verfügbar sind, tausche ich das ursprüngliche Bild gegen das echte aus

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

Hier ist eine sehr einfache Antwort. : D.

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

Sie können try catch block verwenden, um bei nicht gefundenen Bildern zu helfen

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"/>

Der statische Pfad wird von Webpack als Modulabhängigkeit über den Loader aufgelöst. Für dynamische Pfade müssen Sie jedoch require verwenden, um den Pfad aufzulösen. Sie können dann mit einer booleschen Variablen und einem ternären Ausdruck zwischen Bildern wechseln.

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

Und natürlich können Sie den Wert des Booleschen Werts über einen Ereignishandler umschalten.

Nun, der beste und einfachste Weg, der für mich funktioniert hat, war der, bei dem ich Daten von einer API abgerufen habe.

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

Die getPic-Methode verwendet einen Parameter, den Namen der Datei, und gibt den absoluten Pfad der Datei zurück, möglicherweise von Ihrem Server, wobei der Dateiname einfach ist ...

Hier ist ein Beispiel für eine Komponente, in der ich dies verwendet habe:

<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>

Ich bin auf das gleiche Problem gestoßen. Dies funktionierte für mich, indem ich '../assets/' in './assets/' änderte.

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

Versuchen Sie, ein Bild wie dieses zu importieren, da Webpack über seine Abhängigkeit Bescheid wissen sollte

    <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>