Nuxt.js + TypeScriptのサイトにfaviconと画像を表示する

前回の続きです

今回はfaviconを作成してサイトに追加していきます。 箸休め的な記事です。

Nuxt.js + TypeScriptでの開発事始め

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、どちらに画像を追加すれば良いのだろうという点。 公式ドキュメントに改めて目を通し学びました。

出典:Nuxt.js公式ドキュメント参照(アセットより)

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ディレクトリになっていきそうです。

完

Tags

• Nuxt.js JavaScript