macoblog

「ゲーム × プログラミング」で生きていく

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

JavaScript

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

目次【本記事の内容】 [ click ]

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()を使った方法の方がオススメ、もちろんどっちが正解とかはないです。

人気記事無料体験が受けられるプログラミングスクール7社。現役エンジニアが厳選