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

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

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

うまく動作しない例

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

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