【Nuxt.js】画像はassetsに置く？staticに置く？

Nuxt.jsで画像を置く時に使えるフローチャート作りました。

f:id:kayo445:20200913190305p:plain

なんで？って思った方は、下記を読んでみてください＾＾

Nuxtはフォルダ構成が下記のようになっており、画像ファイルはassetsフォルダか、staticフォルダに置くことができます。

各フォルダについて詳細はこちら

f:id:kayo445:20200913190718p:plain

＊assetsに置いた場合、

下記のように画像を指定することで、assets/image.png/を参照することができます。

<img src="@/assets/image.png" />

npm run generateなどでコンパイルしたファイル（.dist）をみてみると、下記のようにコンパイルされたindex.htmlまたはindex.xxxx.js内に、コンパイルされたimage.pngが参照されます

<img src="/_nuxt/image.437d4c0.png">

＊staticに置いた場合、

下記のように画像を指定することで、static/image.pngを参照することができます。

<img src="image.png" />

npm run generateなどでコンパイルしたファイル（.dist）をみてみると、下記のようにコンパイルされたindex.htmlまたはindex.xxxx.js内に、そのままimage.pngが埋め込まれます

<img src="image.png">

なので、フローチャートに記載した通り、普通に文字列でsrcを指定する場合は、assetsに置くべきです（コンパイルされた画像を読み込むため、読み込みが早い）

例えば、下記のようなセレクトボックスで選択した国の国旗を表示する場合を考えてみます。

f:id:kayo445:20200913204154p:plain

＊国旗の画像をassetsに置いた場合、

下記のように画像を指定することで、assets/australia.pngなどの国別画像を参照することができます。(srcではなく:srcにすることで、変数やメソッドを埋め込める。下記countryは変数)

<img :src="require('@/assets/' + country + '.png')" />

ここで注意なのが、assetsの場合はrequireで画像を指定するため、もし、指定した画像がassetsフォルダ内に存在しない場合はコンパイルエラーとなってしまいます。

つまり、存在しない画像をrequireしているコードが入っているvueのページが丸ごと表示されなくなってしまいます。

なので、フローチャートに記載した通り、変数で指定した画像が必ず存在する場合のみ、assetsに入った画像を変数で指定してOK

＊国旗の画像をstaticに置いた場合、

下記のように画像を指定することで、static/australia.pngなどの国別画像を参照することができます。

<img :src="country + '.png'" />

この場合はもし指定した名前の画像がstatic内になくても、ブラウザ上で404エラーが出るだけでコンパイルエラーにはなりません。

下記のようにすることで、画像がない場合にno-image.pngを代わりに表示させることができます（※no-image.pngがない場合は無限ループになるので注意）

<img @error="showNoImage()" :src="country + '.png'" >

下記scriptのメソッド内

showNoImage(){
event.target.src = require('@/assets/no-image.png');
}

なので、フローチャートに記載した通り、変数で指定した画像が存在しない可能性がある場合、static内の画像を変数で指定する

※ただし、Nuxtで@error (onerror)は、ローカル環境では上手く動作しない場合があります。ステージングのサーバなどで動作確認することをお勧めします

以上ですーーー！

コンパイルに関して、webpackについてもっと深く知りたいな！と思ったので、今後記事で取り扱えればと思います。

最近涼しくなってきました。お体に気をつけて。おやすみなさい

tapitapi’s blog