Merge pull request #22 from BKWLD/fix-using-sanity-cdn

Fix using Sanity CDN for images
BKWLD · Aug 11, 2023 · c4f83b3 · c4f83b3
2 parents fc00b81 + 2fa1f7b
commit c4f83b3
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 10 deletions.
diff --git a/packages/next/src/NextVisual.tsx b/packages/next/src/NextVisual.tsx
@@ -76,11 +76,11 @@ export default function NextVisual(
 
 // An image rendered within the Visual
 function NextImage({
-  src, sizes, alt, fit, position, priority, placeholderData
+  src, sizes, alt, fit, position, priority, loader, placeholderData
 }: any): ReactElement {
   return (
     <Image
-      { ...{ src, sizes, priority, alt } }
+      { ...{ src, sizes, priority, loader, alt } }
       fill
       style={{
         objectFit: fit,

diff --git a/packages/sanity-next/next.config.js b/packages/sanity-next/next.config.js
@@ -2,11 +2,6 @@
 module.exports = {
   images: {
 
-    // Disable Next.js producing it's own crops within dev server which don't
-    // work with Cypress tests
-    // https://www.cypress.io/blog/2023/02/16/component-testing-next-js-with-cypress/
-    unoptimized: true,
-
     // Support tests fetching imaages from placehold.co
     remotePatterns: [
       {

diff --git a/packages/sanity-next/src/lib/urlBuilding.ts b/packages/sanity-next/src/lib/urlBuilding.ts
@@ -1,7 +1,11 @@
 import createImageUrlBuilder from '@sanity/image-url'
-import { getFileAsset, type SanityFileSource } from '@sanity/asset-utils'
+import {
+  getFileAsset,
+  getImage,
+  type SanityFileSource
+} from '@sanity/asset-utils'
 import type { ImageUrlBuilder } from '@sanity/image-url/lib/types/builder'
-import type { ImageLoader, ImageLoaderProps } from 'next/image'
+import type { ImageLoaderProps } from 'next/image'
 import type { SanityImageSource } from '@sanity/image-url/lib/types/types'
 import { ObjectFit } from '@react-visual/next'
 
@@ -53,7 +57,7 @@ export function makeImageBuilder(source: SanityImageSource, {
 export function imageLoader(
   { src, width, quality }: ImageLoaderProps
 ): string {
-  const builder = makeImageBuilder(src).width(width)
+  const builder = makeImageBuilder(getImage(src)).width(width)
   if (quality) builder.quality(quality)
   return builder.url()
 }