はじめに
本記事は、プログラミング初学者が学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。
静的な画像ファイルの取り扱い
静的な画像ファイルを配信するためには以下のようにします。
publicフォルダ配下に画像を追加
まず、publicフォルダ配下に画像を追加します。
以下のようにpublicフォルダにsampleフォルダを作成し、sample.jpgを追加しました。
Imageコンポーネントを使用する
次に、画像を表示させるためにindex.jsに以下のように追記します。
index.js
import Head from 'next/head'
import styles from '../styles/Home.module.css'
import Image from 'next/image' // 追記
import Link from 'next/link'
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>Sample App!!</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
Welcome to
<Link href="/posts/samplePost">
<a>Sample App!!</a>
</Link>
</h1>
// 以下追記 (objectFit="contain"はアスペクト比を固定するため)
<Image src="/sample/sample.jpg" alt="Sample Image" width={500} height={500} objectFit="contain" />
</main>
</div>
)
}
するとページに画像が表示されます。
imageタグとImageコンポーネントの違い
imageタグではなく、Imageコンポーネントを使用することで以下の恩恵を受けられます。
-
遅延ロード
ブラウザで画像が表示画面内に入ったとき初めてダウンロードされます。大きなページの末尾部分に配置された画像が、無駄にダウンロードされてしまうのを防ぐことができます。 -
画像の最適化
クライアントに応じて画像ファイルを最適化して配信してくれます。 -
画像の最適化
デフォルトで画面サイズに応じたレスポンシブ表示が行われます。