web-dev-qa-db-ja.com

Vue.js動的画像が機能しない

Vue.js with webpack Webアプリで、動的画像を表示する必要がある場合があります。画像のファイル名が変数に保存されているimgを表示したい。その変数はcomputedプロパティであり、Vuexストア変数を返します。この変数はbeforeMountに非同期的に取り込まれます。

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

しかし、私がちょうどするとき、それは完全に動作します：

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

私の場合、これは fiddle に似ていますが、ここではimg URLで機能しますが、実際のファイルパスでは機能しません。

それを行う正しい方法は何ですか？

javascripthtmlvue.jsvuejs2
42
Saurabh

私はこれを次のコードで動作させました

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

およびHTMLで：

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

しかし、以前のアプローチがうまくいかなかった理由はわかりません。

50
Saurabh

以下にwebpackが使用する略記を示しますので、require.contextを使用する必要はありません。

HTML：

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

Vueメソッド：

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

そして、私は here の最初の2つの段落が説明するなぜこれが機能するのか？まあ。

ペットの写真を他のすべての画像アセットと一緒に取得するのではなく、サブディレクトリ内に置くことをお勧めします。そのように：./assets/pets/

32
Artur Grigio

最善の方法は、単純な方法を使用して、指定されたインデックスで画像の正しい文字列を作成することです。

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

次に、v-for内で次の操作を実行します。

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

JSFiddleは次のとおりです（明らかに画像は表示されないので、画像の横にsrcを配置しました）：

https://jsfiddle.net/q2rzssxr/

8
craig_h

アセットの代わりにパブリックフォルダーに画像ファイルを追加し、それらを静的画像としてアクセスすることにより、別の方法があります。

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

これは、静的イメージを配置する必要がある場所です。

enter image description here

7
Rukshan Dangalla

これは非常に簡単な答えです。 ：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

私にとって最もうまくいく最も簡単な方法は、APIからデータを取得することでした。

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

getPicメソッドは、ファイルの名前であるパラメーターを1つ取り、サーバーからファイルの絶対パスを返します。ファイル名はsimple ...

これは私がこれを使用したコンポーネントの例です：

<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

require関数を試すことができます。このような：

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