Use our own image component

package.json

@@ -12,6 +12,7 @@
     "@json-feed-types/1_1": "^1.0.2",
     "@nuxtjs/plausible": "^1.2.0",
     "@std/http": "npm:@jsr/std__http@^1.0.10",
+    "@voorhoede/image-vue": "^1.0.1",
     "@voorhoede/vue-dato-video": "^3.1.0",
     "datocms-listen": "^0.1.14",
     "datocms-structured-text-utils": "^2.0.4",

src/components/dato-image/dato-image.vue

@@ -1,5 +1,5 @@
 <template>
-  <app-image
+  <Image
     class="dato-image"
     :src="props.src"
     :loader="loader"
@@ -8,36 +8,37 @@
 </template>
 
 <script setup lang="ts">
-  import { withQuery } from 'ufo';
-  import { type ImageLoader } from '../app-image/types';
-  import type { ImgixUrl } from 'typescript-imgix-url-params';
+import { withQuery, type QueryObject } from "ufo";
+import type { ImgixUrl } from "typescript-imgix-url-params";
+import { Image, type ImageLoader } from "@voorhoede/image-vue";
 
-  const props = defineProps<{
-    src: string,
-    srcset?: string,
-    modifiers?: ImgixUrl.Params,
-  }>();
+const props = defineProps<{
+  src: string;
+  srcset?: string;
+  modifiers?: ImgixUrl.Params;
+}>();
 
-  const imgixLoader: ImageLoader = ({ src, width, quality }) => (
-    withQuery(src, { w: width, q: quality, auto: 'format,compress', ...props.modifiers })
-  );
+const imgixLoader: ImageLoader = ({ src, width, quality }) =>
+  withQuery(src, {
+    w: width,
+    q: quality,
+    auto: "format,compress",
+    cs: "origin",
+    ...(props.modifiers as QueryObject),
+  });
 
-  const loader = computed(() => (
-    props.src.endsWith('.svg')
-      ? undefined
-      : imgixLoader
-  ));
+const loader = computed(() =>
+  props.src.endsWith(".svg") ? ({ src }: { src: string }) => src : imgixLoader
+);
 
-  const checkedSrcset = computed(() => (
-    props.src.endsWith('.svg')
-      ? ''
-      : props.srcset
-  ));
+const checkedSrcset = computed(() =>
+  props.src.endsWith(".svg") ? "" : props.srcset
+);
 </script>
 
 <style>
-  .dato-image {
-    display: block;
-    max-width: 100%;
-  }
+.dato-image {
+  display: block;
+  max-width: 100%;
+}
 </style>