Dynamiczne obrazy Vue.js nie działają

Mam przypadek, gdy w moim Vue.jsz webpackaplikacji internetowej, muszę wyświetlania dynamicznych obrazów. Chcę pokazać, imggdzie nazwa pliku obrazów jest przechowywana w zmiennej. Ta zmienna jest computedwłaściwością, która zwraca Vuexzmienną magazynu, która jest wypełniana asynchronicznie beforeMount.

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

Jednak działa idealnie, gdy po prostu robię:

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

Mój przypadek jest podobny do tego skrzypiec , ale tutaj działa z img URL, ale w moim z rzeczywistymi ścieżkami plików nie działa.

Jaki powinien być właściwy sposób, aby to zrobić?

Mam to działające, postępując zgodnie z kodem

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

i w HTML:

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

Ale nie jestem pewien, dlaczego moje wcześniejsze podejście nie zadziałało.

Oto skrót, którego użyje webpack, więc nie musisz go używać require.context.

HTML:

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

Metoda Vue:

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

I stwierdzam, że pierwsze 2 akapity tutaj wyjaśniają, dlaczego to działa? dobrze.

Pamiętaj, że dobrym pomysłem jest umieszczenie zdjęć zwierzaków w podkatalogu, zamiast wrzucać je do wszystkich innych zasobów graficznych. Tak jak to:./assets/pets/

Możesz wypróbować tę requirefunkcję. lubię to:

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

Można to zrobić w inny sposób, dodając pliki obrazów do folderu publicznego zamiast do zasobów i uzyskując do nich dostęp jako obrazy statyczne.

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

Tutaj musisz umieścić swoje statyczne obrazy:

Najlepiej jest po prostu użyć prostej metody do zbudowania prawidłowego ciągu dla obrazu o podanym indeksie:

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

następnie wykonaj następujące czynności w swoim v-for:

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

Oto JSFiddle (oczywiście obrazy się nie pokazują, więc umieściłem obraz srcobok obrazu):

https://jsfiddle.net/q2rzssxr/

Trafiłem też na ten problem i wygląda na to, że obie większość odpowiedzi działają, ale jest mały problem, webpack wyrzuca błąd do konsoli przeglądarki (Error: Cannot find module './undefined' at webpackContextResolve), co nie jest zbyt miłe.

Więc rozwiązałem to trochę inaczej. Cały problem ze zmienną wewnątrz instrukcji require polega na tym, że instrukcja require jest wykonywana podczas pakowania, a zmienna wewnątrz tej instrukcji pojawia się tylko podczas wykonywania aplikacji w przeglądarce. Tak więc webpack widzi wymagany obraz jako niezdefiniowany w obu przypadkach, ponieważ podczas kompilacji ta zmienna nie istnieje.

To, co zrobiłem, to umieszczenie losowego obrazu w instrukcji wymagania i ukrycie tego obrazu w css, aby nikt go nie widział.

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

Obraz jest częścią informacji z bazy danych za pośrednictwem Vuex i jest mapowany na komponent jako obliczony

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

Kiedy te informacje są dostępne, zamieniam obraz początkowy na prawdziwy

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

Oto bardzo prosta odpowiedź. :RE

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

Możesz użyć bloku try catch, aby pomóc w znalezieniu obrazów

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

Ścieżka statyczna jest rozpoznawana przez Webpack jako zależność modułu przez program ładujący. Ale w przypadku ścieżki dynamicznej musisz użyć wymagania do rozwiązania ścieżki. Następnie możesz przełączać się między obrazami, używając zmiennej boolowskiej i wyrażenia trójskładnikowego.

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

I oczywiście przełączaj wartość boolowską za pomocą jakiejś obsługi zdarzeń.

cóż, najlepszym i najłatwiejszym sposobem, który działał dla mnie, był ten, w którym pobierałem dane z interfejsu API.

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

metoda getPic przyjmuje jeden parametr, który jest nazwą pliku i zwraca bezwzględną ścieżkę do pliku, być może z twojego serwera, z prostą nazwą pliku ...

oto przykład komponentu, w którym użyłem tego:

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

Napotkałem ten sam problem. U mnie to zadziałało, zmieniając „../assets/” na „./assets/”.

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

Spróbuj zaimportować obraz w ten sposób, ponieważ Webpack powinien wiedzieć o jego zależności

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