まえがき

前回の記事でNuxt3に導入したNuxt/Imageを実際に使ってみる。ただそのまま使っても公式ドキュメントの内容を機械翻訳したのとあまり変わらないので、今回はMicroCMSの画像フィールドから取得した画像をレスポンシブ画像として表示してみる。

環境

node.js v18.13.0
Typescript v4.7.4
Nuxt v3.0.0-rc.14
TailwindCSS v3.2.4
@nuxt/image-edge v1.0.0
※Vueは当然3.0系
開発環境はWSL(Debian)だったりChromeOS(Crostini+Debian)だったり色々。

手順

Nuxt/Imageは外部の画像処理サービスやライブラリと連携することができる。MicroCMSの画像APIはimgixを利用しており、設定を行えばローカルの画像を読み込むのと同じ要領でレスポンシブ画像を設定することができる

nuxt.config.tsに設定を追加

公式ドキュメントに従い、nuxt.config.tsにimgixの設定を行う。ただしMicroCMSから取得できるURLはフルパスなのでbaseUrlは空文字列にする。

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss', '@nuxt/image-edge', 'nuxt-icon'],
  image: {
    imgix: {
      baseURL: ''
    }
  },
})

imgixをproviderに設定する。

NuxtPictureコンポーネントのprovider属性を"imgix"に設定し、src属性には画像のURLをそのまま代入する。
ちなみにproviderの初期値は"ipx"のため、ローカルの画像と混在させる場合はprovider属性を"ipx"と"imgix"とで切り替えてやれば良い。

picture

        <NuxtPicture
          provider="imgix"
          :src="article.thumbnail"
          legacy-format="jpeg"
          fit="crop"
          height="500"
          width="500"
          :img-attrs="imgAttr"
          :modifiers="modifiers"
        />

modifierの設定

画像の形式についてはNuxtPictureコンポーネントのpropsにある"format"と"legacy-format"に値を渡すのが正解。
それ以外のimgixのAPIを利用する場合はmodifiers属性にオブジェクトとして渡す。
※2023/9/25 ドキュメントを見ていたら間違いに気づいたので修正

modifiers

        <NuxtPicture
          provider="imgix"
          :src="article.thumbnail"
          format="webp"
          legacy-format="jpeg"
          fit="crop"
          height="800"
          width="800"
          :modifiers="{q: 50}"
        />

img要素に属性を追加する。

alt属性などを追加したい場合はimg-attrにオブジェクトとして値を渡す。

img-attr

const imgAttr={ alt:`${article.title}のサムネイル画像`,}

導入した結果

Devtoolで中身を確認して、webpとjpegの両方が設定されていれば成功。

試しにそれぞれのURLから画像を保存してみると両方の形式で保存できている。(ファイル名が長いので省略した。)

こうやって見ると意外と容量に差がない。大きいサイズの画像なら差が出るかもしれない。

参考資料