Cloudflare Images を Nuxt Content で利用する

環境

• nuxt 3.6.1
• @nuxt/content 2.7.0

結論

<script lang="ts" setup>
const props = defineProps<{
  src: string // 画像のパス
  alt: string // 画像の代替文字列
}>()
</script>

<template>
  <img
    :src="`/cdn-cgi/imagedelivery/ACCOUNT_HASH/${props.src}/w=1536`"
    :srcset="`
      /cdn-cgi/imagedelivery/ACCOUNT_HASH/${props.src}/w=320 320w,
      /cdn-cgi/imagedelivery/ACCOUNT_HASH/${props.src}/w=640 640w,
      /cdn-cgi/imagedelivery/ACCOUNT_HASH/${props.src}/w=768 768w,
      /cdn-cgi/imagedelivery/ACCOUNT_HASH/${props.src}/w=1024 1024w,
      /cdn-cgi/imagedelivery/ACCOUNT_HASH/${props.src}/w=1280 1280w,
      /cdn-cgi/imagedelivery/ACCOUNT_HASH/${props.src}/w=1536 1536w
    `"
    :alt="props.alt"
    sizes="(max-width: 768px) 100vw, 768px"
  />
</template>

Prose Component を上書きする

<script lang="ts" setup>
const props = defineProps<{
  src: string // 画像のパス
  alt: string // 画像の代替文字列
}>()
</script>

• Optimize images in markdown? · Issue #390 · nuxt/content

フレキシブルバリアントを有効にする

画像を表示する

• <img>: 画像埋め込み要素 - HTML: HyperText Markup Language | MDN
• img タグの srcset・sizes 属性と picture タグの使い方 - レスポンシブイメージで画像表示を最適化 - ICS MEDIA

https://imagedelivery.net/<ACCOUNT_HASH>/<IMAGE_ID>/<VARIANT_NAME>

https://example.com/cdn-cgi/imagedelivery/<ACCOUNT_HASH>/<IMAGE_ID>/<VARIANT_NAME>

<template>
  <img
    :src="`/cdn-cgi/imagedelivery/ACCOUNT_HASH/${props.src}/w=1536`"
    :srcset="`
      /cdn-cgi/imagedelivery/ACCOUNT_HASH/${props.src}/w=320 320w,
      /cdn-cgi/imagedelivery/ACCOUNT_HASH/${props.src}/w=640 640w,
      /cdn-cgi/imagedelivery/ACCOUNT_HASH/${props.src}/w=768 768w,
      /cdn-cgi/imagedelivery/ACCOUNT_HASH/${props.src}/w=1024 1024w,
      /cdn-cgi/imagedelivery/ACCOUNT_HASH/${props.src}/w=1280 1280w,
      /cdn-cgi/imagedelivery/ACCOUNT_HASH/${props.src}/w=1536 1536w
    `"
    :alt="props.alt"
    sizes="(max-width: 768px) 100vw, 768px"
  />
</template>