Nuxt.jsとVuetifyで画像の指定方法について色々と詰まったので今回はそのことについてまとめてみました。
画像の格納場所
Nuxt.jsには画像ファイルを「assets」と「static」のどちらかに格納することができます。
それぞれの格納場所によって指定方法が異なります。
「assets」からの指定方法
assets配下のファイルを使用する場合は「~/assets」を指定します。
「~」（チルダ）をつけることが普通のHTMLとは異なり、これがないと表示されません。
「~」の代わりに「@」（アットマーク）でも表示されました。
<img src="~/assets/image/sample.png">
<img src="@/assets/image/sample.png">
公式ドキュメント内で書かれているようにCSSでエイリアスを参照する場合は注意が必要です。
Warning: Nuxt 2.0からは ~/ エイリアスは CSS ファイルで正しく解決されないでしょう。 CSS の参照には、~assets（スラッシュなし）か、@ のエイリアスを使わなければなりません。 例：background: url("~assets/banner.svg")
「static」からの指定方法
static配下のファイルを使用する場合はパスのみを指定します。
<img src="/image/sample.png">
/static/の部分は省いていいようでimageから書けばOKです。
格納場所の違いについて
Nuxt.jsには「assets」と「static」のフォルダが２つあるんですがこれはどのように棲み分けをしたらいいのか調べました。
- webpackのモジュールとして扱う場合は、assetsに格納
- webpackしたくないアセットがある場合は、staticに格納
となっておりますが、一概に容量が大きからassetsにともいえないので開発の状態によると思います。
下記に参照を載せておくので、どうするかはルールを決めておいたほうがいいですね。
例えば
- サイトで使い回す画像
- 容量がでかい画像
- 外部ライブラリーで使用する画像
- faviconやogp画像
- 容量の小さいアイコン
- cssで背景に使う画像
- JSで使用する画像
など
使い方参照:
Nuxt.js｜画像の参照方法のいろいろ
Nuxt.jsを使おう：初心者のとっかかり編
※webpackを通すので画像を加工する場合はこちらのほうがよいかも
画像をpackegeで圧縮したり、サイズを変更、変換する場合はassetsになります。
v-bind:srcで指定する場合
src を v-bind によって変数バインドさせた場合はそのままパス文字列が出力されてしまうので、表示されません。
<template>
<img v-bind:src="image_src">
</template>
<script>
export default {
data () {
return {
image_src: "@/assets/images/home/slide01.jpg"
}
}
}
</script>
require()で囲む
これを回避するにはrequire()で囲めば画像が表示されます。
<template>
<img v-bind:src="image_src">
</template>
<script>
export default {
data () {
return {
image_src: require('@/assets/images/home/slide01.jpg')
}
}
}
</script>
template側でのimgタグで直接bindする
template側でのimgタグで直接書いても表示されます。
<template>
<img v-bind:src="require('@/assets/images/home/slide01.jpg')">
</template>
背景画像を表示する
assetsに配置した画像を表示するとき
<template>
<div class="bg"></div>
</template>
<style>
.bg {
background-image: url("~@/assets/images/home/slide01.jpg");
}
<style>
「@」(アットマークの前に)「~」を入れなければ表示されませんので注意。
staticに配置した画像を表示するとき
<template>
<div class="bg"></div>
</template>
<style>
.bg {
background-image: url("~static/images/home/slide01.jpg");
}
// もしくはstaticを省略してもOK
.bg {
background-image: url("/images/home/slide01.jpg");
}
<style>
色々試してみましたがこれで表示されました。
developper toolで確認するとなっていました。
background-image: url(/_nuxt/static/images/home/top-wsos-bg.png);
Vuetifyのv-imgで画像表示する
vuetifyにはimageファイルを表示するコンポーネントが用意されており、様々な機能を利用することができます。
https://vuetifyjs.com/ja/components/images/
相対パスを使用するとエラー
ただし、v-imgで相対パスを使用するとエラーがでて表示されません。
※Vue loaderとVuetifyの相性のようです。
<v-img src=“../assets/sample.jpg”></v-img>
scriptの中で設定しbindさせる
こちらはいちどscript内で設定し、requireで囲ってあげ、v-bindすれば表示されます。
<template>
<v-img v-bind:src="image_src"></v-img>
</template>
<script>
data() {
return {
image_src: require("@/assets/sample.jpg"),
}
}
</script>
template内で直接bindさせる
v-bindでちょくせつする方法もあります。
<template>
<v-img :src="require('@/assets/sample.jpg')"></v-img>
</template>
ただし、vue-awesome-swiperなどのライブラリーを使用したときに上記では表示しなかったのでscriptの中で設定したほうが無難かもしれません。
vuetifyのv-imgは機能は豊富な代わりに設定が少し面倒なことになっています。普通にimgとv-imgの使い分けには注意したほうが良いです。
vuetifyの公式ではいつもhttps:からはじまっているのはこういうわけなのですね。
以上、Nuxt.js(vuetify.js)の画像を参照する方法でした。
通常のHTMLとは違い、いくつも試してみてようやく表示されたので是非ご参考になれば。
参考にしたサイト：
Nuxt.js｜画像の参照方法のいろいろ
06.Vuetifyで画像表示のリンクの注意点
【vue.js】画像ファイルのアドレスの指定方法について【vuetify】
【Nuxt】テンプレートでassetsとstatic配下のリソースを参照するときの書き方
nuxt.jsで:src="require(変数)"で画像パスを指定する時に。。
Vue.jsでimgタグのsrcをバインドさせる際の注意点
Vueで背景画像を設定するときのメモ
Nuxt.jsを使おう：初心者のとっかかり編