vue.js - vue-loader でアセット URL を補間するにはどうすればよいですか?

Question

src動的 (補間された)属性を持つ画像があります。

<img src="./{{bar}}.jpg"/>

vue-loader を補間するにはどうすればよい{{bar}}ですか?

Answer 1

あなたのコードが警告をスローすることは間違いありません（参照されていません）：

[Vue 警告]: src="./{{bar}}.jpg": "src" 属性の補間により 404 リクエストが発生します。代わりに v-bind:src を使用してください。

したがって、値をバインドする必要があります。

<img :src="'/assets/' + bar + '.jpg'">

上記の例ではxxx.jpg、静的ディレクトリから画像を読み込みますassetsが、まだローダー経由ではありません。

これを実現するには、動的な requireを使用する必要があります。

<img :src="loadImage(name)">

methods: {
  loadImage (imgName) {
    return require('./assets/' + imgName + '.jpg')
  }
}

ノート

Webpack はリクエストに一致するすべてのファイルをロードするため、ディレクトリに多数のファイルが含まれている場合はお勧めしません (上記の例の場合: ./assets/*.jpg)。