feat: AcfImage / AcfMedia with @nuxt/image

wp-content/themes/headless/app/components/acf/AcfImage.gql

@@ -0,0 +1,9 @@
+fragment AcfImage on MediaItem {
+  src: sourceUrl @nonNull
+  alt: altText
+  mediaDetails {
+    width @nullToUndefined
+    height @nullToUndefined
+  }
+  objectPosition @nullTo(value: "center")
+}

wp-content/themes/headless/app/components/acf/AcfImage.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { AcfImageFragment } from "#graphql/types";
+
+defineProps<{ image: AcfImageFragment }>();
+</script>
+
+<template>
+  <NuxtImg
+    :src="image.src"
+    :alt="image.alt"
+    :width="image.mediaDetails?.width"
+    :height="image.mediaDetails?.height"
+    :style="{ objectPosition: image.objectPosition }"
+    placeholder
+  />
+</template>

wp-content/themes/headless/app/components/acf/AcfMedia.gql

@@ -0,0 +1,9 @@
+fragment AcfMedia on GroupAbstractMedia_Fields {
+  image @nonNull {
+    node {
+      ...AcfImage
+    }
+  }
+  aspectRatio @enum(values: ["square", "video", "portrait", "auto"])
+  objectFit @enum(values: ["cover", "contain"])
+}

wp-content/themes/headless/app/components/acf/AcfMedia.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { tv } from "tailwind-variants";
+
+import type { AcfMediaFragment } from "#graphql/types";
+
+const props = defineProps<{ media: AcfMediaFragment }>();
+
+const tvAcfMedia = tv({
+  slots: {
+    image: "w-full",
+  },
+  variants: {
+    aspectRatio: {
+      square: { image: "aspect-[1/1]" },
+      video: { image: "aspect-video" },
+      portrait: { image: "aspect-[2/3]" },
+      auto: { image: "aspect-auto" },
+    },
+    objectFit: {
+      cover: { image: "object-cover" },
+      contain: { image: "object-contain" },
+    },
+  },
+  defaultVariants: {
+    aspectRatio: "auto",
+    objectFit: "cover",
+  },
+});
+
+const classes = tvAcfMedia(props.media);
+</script>
+
+<template>
+  <AcfImage :image="media.image.node" :class="classes.image()" />
+</template>