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

Question

Web アプリで動的な画像を表示する必要Vue.jsがある場合があります。画像のファイル名が変数に格納されている場所webpackを表示したい。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 で動作しますが、実際のファイルパスでは動作しません。

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

score 133 · Accepted Answer

次のコードでこれを機能させました

  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>

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

score 130 · Accepted Answer

以下は、webpack が使用する省略表現です。使用する必要はありませんrequire.context。

HTML:

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

ビュー方法:

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

そして、ここの最初の2つの段落で、これが機能する理由を説明していますか? 良い。

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

score 3 · Accepted Answer

Tried all of the answers here but what worked for me on Vue2 is like this.

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

score 2 · Accepted Answer

私はGridsomeを使用しているので、この方法でうまくいきました。

** toLowerCase() メソッドも使用しました

      <img
        :src="
          require(`@/assets/images/flags/${tournamentData.address.country_name.toLowerCase()}.svg`)
        "
      />

score 1 · Accepted Answer

私もこの問題に直面しました。

それを試してみてください：

computed {
    getImage () {
        return require(`../assets/images/${imageName}.jpg`) // the module request
    }
}

これを明確にする良い記事は次のとおりです: https://blog.lichter.io/posts/dynamic-images-vue-nuxt/

16 に答える 16