【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()
を使った方法の方がオススメ、もちろんどっちが正解とかはないです。
飲食→派遣→IT系ベンチャーに転職。
本業をベーシックインカムとし、やりたい事に挑戦するWebエンジニア。