<NuxtPicture> · Nuxtコンポーネント

<NuxtPicture> は、ネイティブの <picture> タグのドロップイン置換です。

<NuxtPicture> の使い方は、<NuxtImg>とほぼ同じですが、可能な場合は webp のような最新のフォーマットを提供することもできます。

MDNで<picture> タグの詳細をご覧ください。

セットアップ

<NuxtPicture> を使用するには、Nuxt Imageモジュールをインストールして有効にする必要があります。

ターミナル

npx nuxi@latest module add image

<NuxtPicture>コンポーネントの詳細はこちら。

Nuxtは、画像の自動最適化を処理するための<NuxtImg>コンポーネントを提供しています。

<Teleport>コンポーネントは、コンポーネントをDOM内の別の場所にテレポートします。