【Vue.js】画像パス(src)を動的に変更する方法【2パターン】

【Vue.js】画像パス(src)を動的に変更する方法【2パターン】

Vue.jsで画像パス(src)を動的に変更する方法について解説しています。変数による画像の切り替えや、ループ内での画像指定を想定しています。よく使うので備忘録として残しておきます。

Vue.jsで画像パス(src)を動的に変更する方法2つ

Vue.jsを使っていると、imgタグのsrc属性を動的に指定したい時があると思います。これを直感的にコードに落とし込むと以下のような書き方になりますが、これは動きません。src属性を:srcにしてbindすると値がそのまま画像パスとして扱われるからです。

うまく動作しない例

<!-- これだと動かない1 -->
<img :src="'../assets/img/' + item.img + '.jpg'`">

<!-- これだと動かない2 -->
<img :src="`../assets/img/${item.img}.jpg`" >

画像パス(src)を動的に変更するには

  • ①:require()を使用する
  • ②:publicに画像を設置+絶対パス指定

①:require()を使用する

<!-- require()を使用する -->
<img :src="require(`@/assets/img/${item.img}.jpg`)" >

bindさせたsrc属性に、require()を使用して画像パスを指定すると上手く動作します。実際にURLを確認するとvue-loaderでコンパイルされたものになっていると思います。

<!-- require()を使用する -->
<div
  :style="[
    {
      'background-image':
        'url(' + require(`@/assets/img/${item.img}.jpg`) + ')',
    },
  ]"
></div>

上記のように、style属性をbindしてrequire()を使って背景画像を指定するという使い方も可能です、結構便利なのでおすすめです。

②:publicに画像を設置+絶対パス指定

公開ディレクトリのpublicに画像を設置して、そこに絶対パスで画像を指定することでも対応は可能です。ただ、個人的には先に紹介したrequire()を使った方法の方がオススメ、もちろんどっちが正解とかはないです。

コメント (0)

コメントする人

セキュリティのためreCAPTCHAを利用しています。
Googleのプライバシーポリシー利用規約が適用されます。
うぇぶとまと|Webエンジニア
うぇぶとまと|Webエンジニア

飲食→派遣→IT系ベンチャーに転職。
本業をベーシックインカムとし、やりたい事に挑戦するWebエンジニア。