Vue.jsで動的なsrc属性を作成してうまく画像が表示されないときの対処方法

2021年5月31日Vue.js

Vue.jsで動的なsrc属性を作成してうまく画像が表示されないときの対処方法です。

Vue動的なsrc属性を作成する

srcフォルダのassetsの中に、imgフォルダを作成してその中に画像を配置していたとします。 その場合、次のようにすれば、src属性を動的にできるはずです。

<a href="#"><img :src="`../assets/img/${item.img}.jpg`" 
:alt="item.img"></a>

これを下のように変換してもうまく動作しない場合があります。

<a href="#"><img :src="'../assets/img/' + item.img + '.jpg'`" 
:alt="item.img"></a>

これは、src属性は、静的に指定するときと動的に指定するときで参照方法が変わるためです。 静的なsrc属性は、webpackのfile-loaderで画像をモジュールとして読み込みますが、 v-bindで動的にすると、そのままパスとして扱われます。 このようなケースでは、次のように対処します。

対処方法１

<a href="#"><img :src="require(`@/assets/img/${item.img}.jpg`)" 
:alt="item.img"></a>

@はsrcフォルダをさします。 そこからのパスをrequire()を使って呼び出します。

対処方法１

画像の配置場所を変更します。 publicフォルダに置き換えて、絶対パスを指定します。