webentwicklung-frage-antwort-db.com.de

Vue.js dynamische Bilder funktionieren nicht

Ich habe einen Fall, in dem ich in meiner Vue.js mit webpack Web-App dynamische Bilder anzeigen muss. Ich möchte img anzeigen, wo der Dateiname der Bilder in einer Variablen gespeichert ist. Diese Variable ist eine computed-Eigenschaft, die eine Vuex-Speichervariable zurückgibt, die asynchron auf beforeMount aufgefüllt wird.

<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 gerade mache:

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

Mein Fall ähnelt diesem Fiddle , aber hier funktioniert es mit img URL, aber bei mir mit tatsächlichen Dateipfaden funktioniert es nicht.

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

29
Saurabh

Ich habe diese Funktion durch folgenden Code erhalten

  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.

42
Saurabh

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

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 2 Absätze in hier warum das funktioniert? gut .

Bitte beachten Sie, dass es eine gute Idee ist, Ihre Haustierbilder in einem Unterverzeichnis abzulegen, anstatt sie mit all Ihren anderen Bildelementen zu bearbeiten. So ähnlich: ./assets/pets/

32
Artur Grigio

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 das JSFiddle (offensichtlich werden die Bilder nicht angezeigt, daher habe ich das Bild src neben das Bild gesetzt):

https://jsfiddle.net/q2rzssxr/

8
craig_h

Es gibt eine andere Möglichkeit, dies zu tun, indem Sie Ihre Bilddateien zu öffentlichen Ordnern anstelle von Assets hinzufügen und auf diese als statische Bilder zugreifen.

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

Hier müssen Sie Ihre statischen Bilder ablegen:

 enter image description here

4

Hier ist eine sehr einfache Antwort. : D

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

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, der der Name der Datei ist, und gibt den absoluten Pfad der Datei zurück, möglicherweise von Ihrem Server mit dem Dateinamen simple ...

hier ist ein Beispiel für eine Komponente, in der ich das 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>
0
user8453321

Sie können die Funktion require ausprobieren. so was:

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