Nuxt.js + TypeScriptのサイトにfaviconと画像を表示する
2020年06月15日
前回の続きです
今回は favicon を作成してサイトに追加していきます。 箸休め的な記事です。
Nuxt.js のサイトに favicon を適用させる
favicon の作り方に関してはこちらに記載しています。 5 分でサクッと favicon を作成する手順
favicon は静的で更新させることは滅多にないのでstaticへ追加します。
次にnuxt.config.jsに設定を追記する
staticディレクトリ名はパスには含めいない。
ファイル名をいじる際はこちらのhrefのアイコン名を変更する。
head: {
link: [
{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }
]
},
上記の対応のうえ実際に favicon を表示させるとこんな感じになります。
favion は 2 文字までならギリギリ読めますね。 表示できたので favicon の設定は完了です！
画像を追加して表示するまで
画像の追加
今回追加する画像は静的なものとして使用したいのでstaticに追加します。
画像の呼び出し
page 側で画像を呼び出します。
staticの画像を呼び出す際は/staticを記載せずに画像パスを記入すれば OK です。
<template>
<div>
<h2>TOP PAGE</h2>
<img src="/img/sample.jpg" />
</div>
</template>
こうすることで画像を表示できました。
Nuxt.js においての assets と static の使い分けについて
vue を学んだ後に Nuxt.js を学び出して疑問に感じたこと。 assets と static、どちらに画像を追加すれば良いのだろうという点。 公式ドキュメントに改めて目を通し学びました。
assets に配置するもの
assets には webpack したいアセットを置きます
- webpack したい画像ファイル
- css ファイル
他にも動的に生成する画像は svg ファイルもassetsに配置する。
よくある A 画像と B 画像を合成して C 画像を生成する、などを行う場合も assets に置いたほうが良さそう。
画像の編集や生成は個人的に好きな処理なので別記事で紹介しようと思います。
webpack の build に画像の容量圧縮のフローなどを追加しておくと手間が省けてヒューマンエラーで圧縮忘れなども起こらなくなるので安心です。 画像の圧縮に関してはこちらに記事を書きました。
assets に配置するもの
webpack しないアセットを配置する
- favicon
- 静的な画像(変更や合成に使用したりしない画像)
実際にどちらも表示してみると
実際にassetsディレクトリの画像とstatiｃディレクトリの画像を表示するとこのような記述になります。
下記のコードのようにassetsディレクトリの画像を呼び出す際は~/assets/と記載しstaticのように省略することはできません。
<template>
<div>
<h2>TOP PAGE</h2>
<!-- static -->
<img src="/img/sample.jpg" />
<!-- assets パスの『~』は『@』でもOK -->
<img src="~/assets/img/sample.jpg" />
</div>
</template>
結論
Q.画像は asse ｔｓと static のどちらに配置すべきかわからない
A.assets は webpack する画像を置き、static には webpack したくない画像を置く
まとめ
nuxt.js で開発する中で asse ｔｓと static の使い分けは重要だと思うので今回の学習を通して学ぶことができました。
今回自分が作成しようとしているのは静的なサイトですので画像を配置するのはstaticディレクトリになっていきそうです。
完