April 8th, 2022

Next.jsで画像表示

Next.js

無限に詰まったので記念に書き残す。

こうする

Imageコンポーネントとやらを使って読み込むそう。

import Image from 'next/image'

export const Avatar: React.FC = () => (
  <Image src="/logo.png" width={64} height={64} alt="logo" />
)

これで /public/logo.png を表示できる。

なるほど。

参考

Next.js の Image コンポーネントで画像を表示する (next/image)
Image コンポーネントの特徴 Next.js が提供している Image コンポーネント (next/image) を使用すると、image 要素をそのまま配置するのに比べて次のような恩恵を受けられます。 遅延ロード (Lazy loading) Web ブラウザでその画像がビューポート内（画面内）に入って来たときに初めてダウンロードされるようになります。大きなページの末尾部分に配置された画像が、無駄にダウンロードされてしまうのを防ぐことができます。 画像の最適化 アクセスしてきたクライアントに応じて画像ファイルを最適化して配信します。例えば、圧縮効率のよい WebP フォーマットなどに変…
Favicon of the bookmark site
https://maku.blog
Site image of the bookmark