<Image>
このAPIリファレンスは、Image Componentで利用可能なpropsおよび設定オプションの使用方法を理解するのに役立ちます。機能や使用方法については、Image Componentページをご覧ください。
app/page.js
import Image from 'next/image'
export default function Page() {
return <Image src="/profile.png" width={500} height={500} alt="著者の写真" />
}
Props
Image Componentで利用可能なpropsの概要は次のとおりです:
Prop | Example | Type | Status |
---|---|---|---|
src | src="/profile.png" | String | Required |
width | width={500} | Integer (px) | Required |
height | height={500} | Integer (px) | Required |
alt | alt="Picture of the author" | String | Required |
loader | loader={imageLoader} | Function | - |
fill | fill={true} | Boolean | - |
sizes | sizes="(max-width: 768px) 100vw, 33vw" | String | - |
quality | quality={80} | Integer (1-100) | - |
priority | priority={true} | Boolean | - |
placeholder | placeholder="blur" | String | - |
style | style={{objectFit: "contain"}} | Object | - |
onLoadingComplete | onLoadingComplete={img => done())} | Function | Deprecated |
onLoad | onLoad={event => done())} | Function | - |
onError | onError(event => fail()} | Function | - |
loading | loading="lazy" | String | - |
blurDataURL | blurDataURL="data:image/jpeg..." | String | - |
overrideSrc | overrideSrc="/seo.png" | String | - |
必須プロパティ
Image Componentには、src
、alt
、width
とheight
(またはfill
)というプロパティが必要です。
app/page.js
import Image from 'next/image'
export default function Page() {
return (
<div>
<Image src="/profile.png" width={500} height={500} alt="著者の写真" />
</div>
)
}
src
以下のいずれかを指定する必要があります:
- 静的にインポートされた画像ファイル
- パス文字列。これは、loaderプロパティに応じて、外部の絶対URLまたは内部パスのいずれかです。
デフォルトのloaderを使用する場合、ソース画像についても次の事項を考慮してください:
- srcが外部URLの場合は、remotePatternsを設定する必要があります
- srcがアニメーション付きまたはJPEG、PNG、WebP、AVIF、GIF、TIFFなどの既知のフォーマットでない場合、画像はそのまま提供されます
- srcがSVGフォーマットの場合、
unoptimized
またはdangerouslyAllowSVG
が有効でない限り、ブロックされます
width
width
プロパティは画像の本質的な幅をピクセル単位で表します。このプロパティは、画像の正しいアスペクト比を推測し、読み込み中のレイアウトシフトを回避するために使用されます。HTMLの<img>
タグにおけるwidth
属性と同様、画像の描画サイズではなく、CSSによって制御さ れます。
静的にインポートされた画像や、fill
プロパティを持つ画像を除いて必須です。
height
height
プロパティは画像の本質的な高さをピクセル単位で表します。このプロパティは、画像の正しいアスペクト比を推測し、読み込み中のレイアウトシフトを回避するために使用されます。HTMLの<img>
タグにおけるheight
属性と同様、画像の描画サイズではなく、CSSによって制御されます。
静的にインポートされた画像や、fill
プロパティを持つ画像を除いて必須です。
Good to know:
width
とheight
プロパティを組み合わせて使用し、画像のアスペクト比を決定し、画像を読み込む前にブラウザがスペースを確保するのに役立ちます。- 本質的なサイズは必ずしもブラウザでの描画サイズを意味するわけではなく、親コンテナによって決定されます。たとえば、親コンテナが本質的なサイズよりも小さい場合、画像はコンテナに収まるように縮小されます。
width
とheight
が不明な場合、fill
プロパティを使用できます。