INDEX
はじめに
Next.jsのImageコンポーネントについて学習をしました。
その結果を執筆します。
Imageコンポーネントとは
画像の最適化やパフォーマンスの向上を容易にするためのものです。
メリット
- widthとheightを省略する事が出来る
- 画像の最適化をしてくれる
- リロード時に画像が表示される領域を確保してくれる -> リロード時のレイアウトが崩れない
内部ファイルの表示方法
1. /public/images配下に画像を配置する
今回は、自作の画像を用意しました。
2. コードを記述する
import { NextPage } from 'next'
import Iamge from 'next/image'
// 画像ファイルをインポート
import Cover from '/public/images/cover.png'
const ImageSample: NextPage<void> = () => {
return (
<>
<p>Iamgeコンポーネントで表示中</p>
<Iamge src={Cover} alt="書影" />
</>
)
}
export default ImageSample
3. 動作確認
ローカル環境で起動して対象ページを確認する
外部ファイルの表示方法
今回は, Google Books APIで取得した画像を表示させたい場合です
1. next.config.jsに外部ドメイン(`’books.google.com’`)を追加する
/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
domains: ['books.google.com'],
},
}
module.exports = nextConfig
2. Image コンポーネントのsrcに URL を追加する
import { NextPage } from 'next'
import Iamge from 'next/image'
const ImageSample: NextPage<void> = () => {
const URL = 'http://books.google.com/books/content?id=Wx1dLwEACAAJ&printsec=frontcover&img=1&zoom=1&source=gbs_api'
return (
<>
<p>Iamgeコンポーネントで表示中</p>
<Iamge src={URL} width={150} height={200} alt="書影" />
</>
)
}
export default ImageSample
3. 動作確認
ローカル環境で起動して対象ページを確認する
