nuxt.js静的画像参照の書き方

はじめに

Nuxt.jsでは、assets(モジュール部品とする),static（静的フォルダ）の下に画像を配置します。

アセット
デフォルトでは、Nuxt は vue-loader、file-loader、url-loader webpack ローダーを使用して、強力なアセットを提供します。 静的アセットには static ディレクトリを使用することもできます。

出典：https://ja.nuxtjs.org/guide/assets/

Assetsフォルダー例：

vue.js

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

Staticフォルダー例：

vue.js

<img src="/image/no-image.png" />

ただし、書き方によってWindows,Mac,Linuxに表示されない場合がありました。

もともとのコード

vue.js

<v-img :src="require('~/assets/image/no-image.png').default" />

作る時点はWindows,Mac,Linuxでも正常に動作しました。

最近の発生した現象

Windowsでは「require('~/assets/image/no-image.png').default」はundefinedになってしまったため、
画像表示されない問題です。

解消案

vue.js

<v-img :src="require('~/assets/image/no-image.png').default ?
             require('~/assets/image/no-image.png').default :
             require('~/assets/image/no-image.png')"

つまり、undefinedの場合はdefaultを削除してrequire('~/assets/image/no-image.png')のように変更。

ほかの解消方法もあると思いますが、修正した内容をメモしました。

以上