🐾
【Next.js v13】next/imageについて
特徴
HTMLの<img>
要素を以下の通り拡張する
- サイズの最適化
WebPやAVEFなどの最新の画像フォーマットを使用して、デバイスごとに正しいサイズの画像を自動的に提供する - 視覚的安定性
画像が読み込まれているときにレイアウトのシフトを自動的に防止する - より高速なページ読み込み
画像は、オプションのぼかしプレースホルダを使用して、ネイティブブラウザの遅延読み込みを使用してビューポートに入ったときにのみ読み込まれる
使い方
Imageタグのインポート
import Image from "next/image";
必要なprops
src
width
height
alt
その他のprops
loader
fill
sizes
priority
placeholder
style
onLoadingComplete
onLoad
onError
loading
blurDataURL
src
について
- ローカル画像の場合
- 画像ファイルをインポートして使用する
// 画像ファイルのインポート
import profilePic from '../public/me.png';
// srcプロパティの設定
src={profilePic}
- リモート画像の場合
-
src
プロパティにURLを文字列で指定する -
next.config.js
を設定する
module.exports = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'ホスト名',
port: '',
pathname: 'パス名',
},
],
},
};
サイズ調整について
画像読み込みによるレイアウトシフトを防止するため、3つの方法のいずれかでサイズを調整する必要がある
- 静的インポートを行う
-
width
とheight
プロパティを設定する -
fill
プロパティによって、親要素を満たすように展開させる
スタイリングについて
- スタイリングには
className
かstyle
を使用する(基本的にはclassName
がおすすめ) -
fill
プロパティを使う際は、親要素はposition:relative
とdisplay:block
である必要がある
Discussion