From 62b438787c945e9fc94807154b2062d12c465b05 Mon Sep 17 00:00:00 2001 From: Tim Benniks Date: Tue, 27 Aug 2024 15:04:39 +0200 Subject: [PATCH] fix(hygraph): new asset management support (#1415) --- src/runtime/providers/hygraph.ts | 30 ++- test/e2e/__snapshots__/hygraph.json5 | 12 +- test/e2e/__snapshots__/no-ssr.test.ts.snap | 284 --------------------- test/e2e/__snapshots__/ssr.test.ts.snap | 277 -------------------- 4 files changed, 32 insertions(+), 571 deletions(-) delete mode 100644 test/e2e/__snapshots__/no-ssr.test.ts.snap delete mode 100644 test/e2e/__snapshots__/ssr.test.ts.snap diff --git a/src/runtime/providers/hygraph.ts b/src/runtime/providers/hygraph.ts index 7b05d92f0..fc1816a30 100644 --- a/src/runtime/providers/hygraph.ts +++ b/src/runtime/providers/hygraph.ts @@ -19,14 +19,36 @@ export function getImageFormat(format?: string) { return result } +export function splitUpURL(url: string, baseURL: string) { + // Starting Image URL: https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/cltsrex89477t08unlckqx9ue + + // get Both IDs split off of the baseURL + // -> cltsj3mii0pvd07vwb5cyh1ig/cltsrex89477t08unlckqx9ue + const bothIds = url.split(`${baseURL}/`)[1] + + // get baseId + // -> cltsj3mii0pvd07vwb5cyh1ig + const baseId = bothIds.split('/')[0] + + // get imageId + // -> cltsrex89477t08unlckqx9ue + const imageId = url.split(`/`)[url.split(`/`).length - 1] + + return { + baseId, + imageId, + } +} + export function optimizeHygraphImage(baseURL: string, url: string, optimizations: ImageOptimizations) { baseURL = baseURL.replace(/\/+$/, '') - const imageId = url.split(`${baseURL}/`)[1] + + const { baseId, imageId } = splitUpURL(url, baseURL) const imageFormat = getImageFormat(optimizations.format) const optimBase = 'resize' - const quality = optimizations.quality ? `quality=value:${optimizations.quality}/compress=metadata:true/` : '' + const quality = optimizations.quality && imageFormat !== 'auto_image' ? `quality=value:${optimizations.quality}/` : '' - const optimList = [] + const optimList: [string?] = [] for (const [key, value] of Object.entries(optimizations)) { if (key !== 'format' && key !== 'quality' && value !== undefined) { if (key === 'fit' && value === 'contain') { @@ -39,7 +61,7 @@ export function optimizeHygraphImage(baseURL: string, url: string, optimizations } const optim = `${optimBase}=${optimList.join(',')}` - const result = joinURL(baseURL, optim, quality, imageFormat, imageId) + const result = joinURL(baseURL, baseId, optim, quality, imageFormat, imageId) return result } diff --git a/test/e2e/__snapshots__/hygraph.json5 b/test/e2e/__snapshots__/hygraph.json5 index 38a45b084..44f19a7b5 100644 --- a/test/e2e/__snapshots__/hygraph.json5 +++ b/test/e2e/__snapshots__/hygraph.json5 @@ -1,12 +1,12 @@ { "requests": [ - "https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/resize=width:300,height:300,fit:clip/output=format:jpeg/cltsrex89477t08unlckqx9ue", - "https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/resize=width:500,fit:max/auto_image/cltsrex89477t08unlckqx9ue", - "https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/resize=width:500,height:500,fit:crop/quality=value:90/compress=metadata:true/auto_image/cltsrex89477t08unlckqx9ue", + "https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/cltsrex89477t08unlckqx9ue/resize=width:300,height:300,fit:clip/output=format:jpeg/cltsrex89477t08unlckqx9ue", + "https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/cltsrex89477t08unlckqx9ue/resize=width:500,fit:max/auto_image/cltsrex89477t08unlckqx9ue", + "https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/cltsrex89477t08unlckqx9ue/resize=width:500,height:500,fit:crop/auto_image/cltsrex89477t08unlckqx9ue", ], "sources": [ - "https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/resize=width:500,height:500,fit:crop/quality=value:90/compress=metadata:true/auto_image/cltsrex89477t08unlckqx9ue", - "https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/resize=width:500,fit:max/auto_image/cltsrex89477t08unlckqx9ue", - "https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/resize=width:300,height:300,fit:clip/output=format:jpeg/cltsrex89477t08unlckqx9ue", + "https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/cltsrex89477t08unlckqx9ue/resize=width:500,height:500,fit:crop/auto_image/cltsrex89477t08unlckqx9ue", + "https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/cltsrex89477t08unlckqx9ue/resize=width:500,fit:max/auto_image/cltsrex89477t08unlckqx9ue", + "https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/cltsrex89477t08unlckqx9ue/resize=width:300,height:300,fit:clip/output=format:jpeg/cltsrex89477t08unlckqx9ue", ], } \ No newline at end of file diff --git a/test/e2e/__snapshots__/no-ssr.test.ts.snap b/test/e2e/__snapshots__/no-ssr.test.ts.snap deleted file mode 100644 index ab91f8cec..000000000 --- a/test/e2e/__snapshots__/no-ssr.test.ts.snap +++ /dev/null @@ -1,284 +0,0 @@ -// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html - -exports[`browser (ssr: false) > aliyun should render images 1`] = ` -[ - "https://assets.yanbot.tech/nuxt.png?image_process=resize,h_200", - "https://assets.yanbot.tech/nuxt.png?image_process=resize,fw_300,fh_300", - "https://assets.yanbot.tech/nuxt.png?image_process=quality,Q_50", - "https://assets.yanbot.tech/nuxt.png?image_process=resize,fw_900,fh_200/format,webp/quality,Q_80", -] -`; - -exports[`browser (ssr: false) > awsAmplify should render images 1`] = ` -[ - "https://example.amplifyapp.com/_amplify/image?url=%2Ftest.jpg&w=320&q=100", -] -`; - -exports[`browser (ssr: false) > bunny should render images 1`] = ` -[ - "https://bunnyoptimizerdemo.b-cdn.net/bunny1.jpg?sharpen=true&aspect_ratio=16:9&width=1000&quality=80", - "https://bunnyoptimizerdemo.b-cdn.net/bunny2.jpg?crop=750,750&crop_gravity=north", - "https://bunnyoptimizerdemo.b-cdn.net/bunny3.jpg?flop=true&auto_optimize=high", -] -`; - -exports[`browser (ssr: false) > caisy should render images 1`] = ` -[ - "https://assets.caisy.io/assets/b76210be-a043-4989-98df-ecaf6c6e68d8/056c27e2-81f5-4cd3-b728-cef181dfe7dc/d83ea6f0-f90a-462c-aebd-b8bc615fdce0pexelsmiguelapadrinan1591056.jpg?w=500&h=500&q=90", -] -`; - -exports[`browser (ssr: false) > cloudflare should render images 1`] = ` -[ - "https://that-test.site/cdn-cgi/image/h=300,fit=contain/https://s3.that-test.site/burger.jpeg", -] -`; - -exports[`browser (ssr: false) > cloudimage should render images 1`] = ` -[ - "https://2412819702-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlIgyYELwJG6odLEyCM6i%2Fuploads%2FAHcbuKRYbIlBWO4cJ88b%2Fimage.png?alt=media&token=62ff753d-83eb-4e3f-932c-96eb72d455f1?width=400&height=250&force_format=webp&q=65&func=fit", - "https://demo.cloudimg.io/v7/sample.li/bag.jpg?width=500&height=500&func=fit", - "https://demo.cloudimg.io/v7/sample.li/boat.jpg?width=800&height=800&q=75&func=crop", - "https://demo.cloudimg.io/v7/sample.li/img.jpg?width=300&height=300&force_format=webp&func=cover", -] -`; - -exports[`browser (ssr: false) > cloudinary should render images 1`] = ` -[ - "https://res.cloudinary.com/nuxt/image/upload/f_auto,q_auto/remote/nuxt-org/blog/going-full-static/main", - "https://res.cloudinary.com/nuxt/image/upload/f_auto,q_auto,w_200,h_200,c_crop/remote/nuxt-org/blog/going-full-static/main", - "https://res.cloudinary.com/nuxt/image/upload/f_auto,q_auto,w_200,h_200,c_thumb/remote/nuxt-org/blog/going-full-static/main", -] -`; - -exports[`browser (ssr: false) > contentful should render images 1`] = ` -[ - "https://images.ctfassets.net/fbr4i5aajb0w/6y0psij2o02YIwGScEo4kS/1b3f09b8fcedece1d17ea58417b55eb4/photo-1421986527537-888d998adb74.jpeg", - "https://images.ctfassets.net/fbr4i5aajb0w/6y0psij2o02YIwGScEo4kS/1b3f09b8fcedece1d17ea58417b55eb4/photo-1421986527537-888d998adb74.jpeg?w=200&h=133", - "https://images.ctfassets.net/fbr4i5aajb0w/6y0psij2o02YIwGScEo4kS/1b3f09b8fcedece1d17ea58417b55eb4/photo-1421986527537-888d998adb74.jpeg?w=200&h=200&fit=fill", -] -`; - -exports[`browser (ssr: false) > directus should render images 1`] = ` -[ - "http://localhost:8055/assets/ad514db1-eb90-4523-8183-46781437e7ee", - "http://localhost:8055/assets/ad514db1-eb90-4523-8183-46781437e7ee.jpg?withoutEnlargement=true&width=1024&height=256&fit=cover", - "http://localhost:8055/assets/ad514db1-eb90-4523-8183-46781437e7ee?width=256&format=webp", - "http://localhost:8055/assets/ad514db1-eb90-4523-8183-46781437e7ee?withoutEnlargement=true&transforms=%5B%5B%22blur%22%2C4%5D%2C%5B%22negate%22%5D%5D&width=256&format=webp", -] -`; - -exports[`browser (ssr: false) > edgio should render images 1`] = ` -[ - "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&height=200", - "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&width=50", - "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&quality=10", -] -`; - -exports[`browser (ssr: false) > fastly should render images 1`] = ` -[ - "https://www.fastly.io/image.jpg", - "https://www.fastly.io/plant.jpeg", -] -`; - -exports[`browser (ssr: false) > glide should render images 1`] = ` -[ - "https://glide.herokuapp.com/1.0/kayaks.jpg?gam=0.9&sharp=8&w=1000&q=70", -] -`; - -exports[`browser (ssr: false) > gumlet should render images 1`] = ` -[ - "https://demo.gumlet.io/sea.jpeg?w=300&h=300&fit=crop", -] -`; - -exports[`browser (ssr: false) > hygraph should render images 1`] = ` -[ - "https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/resize=width:500,height:500,fit:crop/quality=value:90/compress=metadata:true/auto_image/cltsrex89477t08unlckqx9ue", - "https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/resize=width:500,fit:max/auto_image/cltsrex89477t08unlckqx9ue", - "https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/resize=width:300,height:300,fit:clip/output=format:jpeg/cltsrex89477t08unlckqx9ue", -] -`; - -exports[`browser (ssr: false) > imageengine should render images 1`] = ` -[ - "https://abc123.imgeng.in/images/image.jpg?imgeng=/meta_true/s_10/w_300/h_300/m_box", -] -`; - -exports[`browser (ssr: false) > imagekit should render images 1`] = ` -[ - "https://ik.imagekit.io/demo/girl.jpeg", - "https://ik.imagekit.io/demo/girl.jpeg?tr=w-400,h-300,c-force", - "https://ik.imagekit.io/demo/girl.jpeg?tr=fo-auto,w-200,h-300", - "https://ik.imagekit.io/demo/girl.jpeg?tr=fo-face,w-150,h-150", - "https://ik.imagekit.io/demo/girl.jpeg?tr=fo-face,r-max,w-150,h-150", -] -`; - -exports[`browser (ssr: false) > imgix should render images 1`] = ` -[ - "https://assets.imgix.net/remote/nuxt-org/blog/woman-hat.jpg?w=300&h=300&fit=crop", -] -`; - -exports[`browser (ssr: false) > ipx should render images 1`] = ` -[ - "/_ipx/s_300x300/images/colors.jpg", - "/_ipx/s_300x300/images/everest.jpg", - "/_ipx/s_300x300/images/tacos.svg", - "/_ipx/s_300x300/unsplash/photo-1606112219348-204d7d8b94ee", -] -`; - -exports[`browser (ssr: false) > layer0 should render images 1`] = ` -[ - "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&height=200", - "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&width=50", - "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&quality=10", -] -`; - -exports[`browser (ssr: false) > netlifyImageCdn should render images 1`] = ` -[ - "https://netlify-photo-gallery.netlify.app/.netlify/images?w=100&h=100&fit=cover&url=%2Fimages%2Fapple.jpg", - "https://netlify-photo-gallery.netlify.app/.netlify/images?w=400&h=300&url=%2Fimages%2Fapple.jpg", -] -`; - -exports[`browser (ssr: false) > netlifyLargeMedia should render images 1`] = ` -[ - "https://netlify-photo-gallery.netlify.app/images/apple.jpg?w=101&nf_resize=fit", - "https://netlify-photo-gallery.netlify.app/images/apple.jpg?w=200&h=200&nf_resize=smartcrop", -] -`; - -exports[`browser (ssr: false) > none should render images 1`] = ` -[ - "/images/colors.jpg", - "/images/everest.jpg", - "/images/tacos.svg", - "https://images.unsplash.com/photo-1606112219348-204d7d8b94ee", -] -`; - -exports[`browser (ssr: false) > prepr should render images 1`] = ` -[ - "https://nuxt-prepr-demo.stream.prepr.io/q_5/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", - "https://nuxt-prepr-demo.stream.prepr.io/h_200/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", - "https://nuxt-prepr-demo.stream.prepr.io/w_200/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", - "https://nuxt-prepr-demo.stream.prepr.io/w_200,h_200/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", - "https://nuxt-prepr-demo.stream.prepr.io/w_250,h_250/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", - "https://nuxt-prepr-demo.stream.prepr.io/c_southeast,w_250,h_200/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", - "https://nuxt-prepr-demo.stream.prepr.io/c_centre,w_250,h_200/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", - "https://nuxt-prepr-demo.stream.prepr.io/w_250,h_200,fit_crop/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", -] -`; - -exports[`browser (ssr: false) > prismic should render images 1`] = ` -[ - "https://images.prismic.io/200629-sms-hoy/f596a543-d593-4296-9abd-3d3ac15f1e39_ray-hennessy-mpw37yXc_WQ-unsplash.jpg?auto=compress,format&w=600&h=900", - "https://images.prismic.io/200629-sms-hoy/f596a543-d593-4296-9abd-3d3ac15f1e39_ray-hennessy-mpw37yXc_WQ-unsplash.jpg?auto=compress,format&w=200&h=900", - "https://images.prismic.io/200629-sms-hoy/f596a543-d593-4296-9abd-3d3ac15f1e39_ray-hennessy-mpw37yXc_WQ-unsplash.jpg?auto=compress,format&w=600&h=200", - "https://images.prismic.io/200629-sms-hoy/f596a543-d593-4296-9abd-3d3ac15f1e39_ray-hennessy-mpw37yXc_WQ-unsplash.jpg?auto=compress,format&w=200&h=200&fit=crop", -] -`; - -exports[`browser (ssr: false) > sanity should render images 1`] = ` -[ - "https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?auto=format", - "https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?w=200&h=200&fit=scale&auto=format", - "https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?w=200&h=200&fit=crop&auto=format", - "https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?w=200&h=200&fit=fill&auto=format&bg=ffffff", - "https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?w=200&rect=71,4,229,280&fp-x=0.4469178082191783&fp-y=0.32778302629507167&auto=format", -] -`; - -exports[`browser (ssr: false) > sirv should render images 1`] = ` -[ - "https://demo.sirv.com/test.png?w=750&q=75", - "https://demo.sirv.com/harris-large.jpg?w=500&format=png", - "https://demo.sirv.com/lacoste.jpg?crop.type=trim&w=500&q=95", - "https://demo.sirv.com/look-big.jpg?h=500&scale.option=fit", - "https://demo.sirv.com/look-big.jpg?crop.type=face&h=500", - "https://demo.sirv.com/QW.pdf?page=1&w=500", - "https://demo.sirv.com/look-big.jpg?text=Hello&text.align=center&text.position.gravity=south&text.background.color=ffff&text.size=60&text.font.family=Arial&text.color=white&h=500", - "https://demo.sirv.com/t-shirt-man.jpg?watermark=/watermark-v1.png&watermark.position=center&watermark.scale.width=30%&h=500", -] -`; - -exports[`browser (ssr: false) > storyblok should render images 1`] = ` -[ - "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg", - "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/500x500", - "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/500x0", - "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/0x500", - "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/fit-in/200x200", - "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/200x0/filters:format(webp)", - "https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg/m/600x130", - "https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg/m/600x130", - "https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg/m/600x130", - "https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg/m/600x130", -] -`; - -exports[`browser (ssr: false) > strapi should render images 1`] = ` -[ - "http://localhost:1337/uploads/4d9z1eiyo2gmf6gd7xhp_823ae510e8.png", - "http://localhost:1337/uploads/thumbnail_4d9z1eiyo2gmf6gd7xhp_823ae510e8.png", - "http://localhost:1337/uploads/small_4d9z1eiyo2gmf6gd7xhp_823ae510e8.png", - "http://localhost:1337/uploads/medium_4d9z1eiyo2gmf6gd7xhp_823ae510e8.png", - "http://localhost:1337/uploads/large_4d9z1eiyo2gmf6gd7xhp_823ae510e8.png", -] -`; - -exports[`browser (ssr: false) > unsplash should render images 1`] = ` -[ - "https://images.unsplash.com/photo-1606112219348-204d7d8b94ee?w=300&h=300&fm=auto&q=75&fit=crop", - "https://images.unsplash.com/photo-1532236204992-f5e85c024202?crop=entropy&cs=tinysrgb&ixid=MnwxOTgwMDZ8MHwxfHNlYXJjaHwyOHx8dG9reW98ZW58MHx8fHwxNjczNzk3MDIz&w=300&h=300&fm=auto&q=75&fit=crop", -] -`; - -exports[`browser (ssr: false) > uploadcare should render images 1`] = ` -[ - "https://ucarecdn.com/c160afba-8b42-45a9-a46a-d393248b0072/-/resize/512x512/", - "https://ucarecdn.com/4740215e-ed0f-478f-8dbd-4859d8ea4e60/-/resize/512x/", - "https://ucarecdn.com/2e36710d-21ea-42b3-ac9e-3caa80f7e7bc/-/resize/x512/", - "https://ucarecdn.com/678053e2-ad98-42be-8443-e114b8a1b294/-/scale_crop/1080x300/center/", - "https://ucarecdn.com/034e80f0-14af-408a-9eae-1e233c361256/-/setfill/000000/-/resize/1080x300/-/stretch/off/", - "https://ucarecdn.com/6d7dd597-a829-4f03-a3cc-f87ff8a94d14/-/smart_resize/1080x300/", - "https://ucarecdn.com/beb68506-f5c3-4b85-8d8c-143ad62d5390/-/smart_resize/1080x300/", - "https://ucarecdn.com/31e84033-f22e-4ed0-9462-76f9179e13e1/-/smart_resize/1080x300/", -] -`; - -exports[`browser (ssr: false) > vercel should render images 1`] = ` -[ - "https://image-component.nextjs.gallery/_next/image?url=%2Fcolors.jpg&w=750&q=75", -] -`; - -exports[`browser (ssr: false) > wagtail should render images 1`] = ` -[ - "https://cms.demo.nypr.digital/images/329944/original|format-webp|webpquality-70", - "https://cms.demo.nypr.digital/images/329944/fill-600x600-c0|format-webp|webpquality-70", - "https://cms.demo.nypr.digital/images/329944/width-250|format-webp|webpquality-70", - "https://cms.demo.nypr.digital/images/329944/height-250|format-webp|webpquality-70", - "https://cms.demo.nypr.digital/images/329944/fill-600x600-c0|format-jpeg|jpegquality-70", - "https://cms.demo.nypr.digital/images/329944/fill-600x600-c0|format-jpeg|jpegquality-2", - "https://cms.demo.nypr.digital/images/329944/fill-200x200-c100|format-webp|webpquality-70", -] -`; - -exports[`browser (ssr: false) > weserv should render images 1`] = ` -[ - "https://wsrv.nl/?filename=200&we&output=webp&url=https://picsum.photos/200", - "https://wsrv.nl/?filename=200&we&mask=circle&output=webp&url=https://picsum.photos/200", - "https://wsrv.nl/?filename=200&we&mask=circle&filt=sepia&output=webp&url=https://picsum.photos/200", - "https://wsrv.nl/?filename=200&we&mask=circle&filt=sepia&output=webp&url=https://picsum.photos/200", -] -`; diff --git a/test/e2e/__snapshots__/ssr.test.ts.snap b/test/e2e/__snapshots__/ssr.test.ts.snap deleted file mode 100644 index 15486fe8c..000000000 --- a/test/e2e/__snapshots__/ssr.test.ts.snap +++ /dev/null @@ -1,277 +0,0 @@ -// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html - -exports[`browser (ssr: true) > aliyun should render images 1`] = ` -[ - "https://assets.yanbot.tech/nuxt.png?image_process=resize,h_200", - "https://assets.yanbot.tech/nuxt.png?image_process=resize,fw_300,fh_300", - "https://assets.yanbot.tech/nuxt.png?image_process=quality,Q_50", - "https://assets.yanbot.tech/nuxt.png?image_process=resize,fw_900,fh_200/format,webp/quality,Q_80", -] -`; - -exports[`browser (ssr: true) > awsAmplify should render images 1`] = ` -[ - "https://example.amplifyapp.com/_amplify/image?url=%2Ftest.jpg&w=320&q=100", -] -`; - -exports[`browser (ssr: true) > bunny should render images 1`] = ` -[ - "https://bunnyoptimizerdemo.b-cdn.net/bunny1.jpg?sharpen=true&aspect_ratio=16:9&width=1000&quality=80", - "https://bunnyoptimizerdemo.b-cdn.net/bunny2.jpg?crop=750,750&crop_gravity=north", - "https://bunnyoptimizerdemo.b-cdn.net/bunny3.jpg?flop=true&auto_optimize=high", -] -`; - -exports[`browser (ssr: true) > caisy should render images 1`] = ` -[ - "https://assets.caisy.io/assets/b76210be-a043-4989-98df-ecaf6c6e68d8/056c27e2-81f5-4cd3-b728-cef181dfe7dc/d83ea6f0-f90a-462c-aebd-b8bc615fdce0pexelsmiguelapadrinan1591056.jpg?w=500&h=500&q=90", -] -`; - -exports[`browser (ssr: true) > cloudflare should render images 1`] = ` -[ - "https://that-test.site/cdn-cgi/image/h=300,fit=contain/https://s3.that-test.site/burger.jpeg", -] -`; - -exports[`browser (ssr: true) > cloudimage should render images 1`] = ` -[ - "https://2412819702-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlIgyYELwJG6odLEyCM6i%2Fuploads%2FAHcbuKRYbIlBWO4cJ88b%2Fimage.png?alt=media&token=62ff753d-83eb-4e3f-932c-96eb72d455f1?width=400&height=250&force_format=webp&q=65&func=fit", - "https://demo.cloudimg.io/v7/sample.li/bag.jpg?width=500&height=500&func=fit", - "https://demo.cloudimg.io/v7/sample.li/boat.jpg?width=800&height=800&q=75&func=crop", - "https://demo.cloudimg.io/v7/sample.li/img.jpg?width=300&height=300&force_format=webp&func=cover", -] -`; - -exports[`browser (ssr: true) > cloudinary should render images 1`] = ` -[ - "https://res.cloudinary.com/nuxt/image/upload/f_auto,q_auto/remote/nuxt-org/blog/going-full-static/main", - "https://res.cloudinary.com/nuxt/image/upload/f_auto,q_auto,w_200,h_200,c_crop/remote/nuxt-org/blog/going-full-static/main", - "https://res.cloudinary.com/nuxt/image/upload/f_auto,q_auto,w_200,h_200,c_thumb/remote/nuxt-org/blog/going-full-static/main", -] -`; - -exports[`browser (ssr: true) > contentful should render images 1`] = ` -[ - "https://images.ctfassets.net/fbr4i5aajb0w/6y0psij2o02YIwGScEo4kS/1b3f09b8fcedece1d17ea58417b55eb4/photo-1421986527537-888d998adb74.jpeg", - "https://images.ctfassets.net/fbr4i5aajb0w/6y0psij2o02YIwGScEo4kS/1b3f09b8fcedece1d17ea58417b55eb4/photo-1421986527537-888d998adb74.jpeg?w=200&h=133", - "https://images.ctfassets.net/fbr4i5aajb0w/6y0psij2o02YIwGScEo4kS/1b3f09b8fcedece1d17ea58417b55eb4/photo-1421986527537-888d998adb74.jpeg?w=200&h=200&fit=fill", -] -`; - -exports[`browser (ssr: true) > directus should render images 1`] = ` -[ - "http://localhost:8055/assets/ad514db1-eb90-4523-8183-46781437e7ee", - "http://localhost:8055/assets/ad514db1-eb90-4523-8183-46781437e7ee.jpg?withoutEnlargement=true&width=1024&height=256&fit=cover", - "http://localhost:8055/assets/ad514db1-eb90-4523-8183-46781437e7ee?width=256&format=webp", - "http://localhost:8055/assets/ad514db1-eb90-4523-8183-46781437e7ee?withoutEnlargement=true&transforms=%5B%5B%22blur%22%2C4%5D%2C%5B%22negate%22%5D%5D&width=256&format=webp", -] -`; - -exports[`browser (ssr: true) > edgio should render images 1`] = ` -[ - "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&height=200", - "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&width=50", - "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&quality=10", -] -`; - -exports[`browser (ssr: true) > fastly should render images 1`] = ` -[ - "https://www.fastly.io/image.jpg", - "https://www.fastly.io/plant.jpeg", -] -`; - -exports[`browser (ssr: true) > glide should render images 1`] = ` -[ - "https://glide.herokuapp.com/1.0/kayaks.jpg?gam=0.9&sharp=8&w=1000&q=70", -] -`; - -exports[`browser (ssr: true) > gumlet should render images 1`] = ` -[ - "https://demo.gumlet.io/sea.jpeg?w=300&h=300&fit=crop", -] -`; - -exports[`browser (ssr: true) > hygraph should render images 1`] = ` -[ - "https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/resize=width:500,height:500,fit:crop/quality=value:90/compress=metadata:true/auto_image/cltsrex89477t08unlckqx9ue", - "https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/resize=width:500,fit:max/auto_image/cltsrex89477t08unlckqx9ue", - "https://eu-central-1-shared-euc1-02.graphassets.com/cltsj3mii0pvd07vwb5cyh1ig/resize=width:300,height:300,fit:clip/output=format:jpeg/cltsrex89477t08unlckqx9ue", -] -`; - -exports[`browser (ssr: true) > imageengine should render images 1`] = ` -[ - "https://abc123.imgeng.in/images/image.jpg?imgeng=/meta_true/s_10/w_300/h_300/m_box", -] -`; - -exports[`browser (ssr: true) > imagekit should render images 1`] = ` -[ - "https://ik.imagekit.io/demo/girl.jpeg", - "https://ik.imagekit.io/demo/girl.jpeg?tr=w-400,h-300,c-force", - "https://ik.imagekit.io/demo/girl.jpeg?tr=fo-auto,w-200,h-300", - "https://ik.imagekit.io/demo/girl.jpeg?tr=fo-face,w-150,h-150", - "https://ik.imagekit.io/demo/girl.jpeg?tr=fo-face,r-max,w-150,h-150", -] -`; - -exports[`browser (ssr: true) > imgix should render images 1`] = ` -[ - "https://assets.imgix.net/remote/nuxt-org/blog/woman-hat.jpg?w=300&h=300&fit=crop", -] -`; - -exports[`browser (ssr: true) > ipx should render images 1`] = ` -[ - "/_ipx/s_300x300/images/colors.jpg", - "/_ipx/s_300x300/images/everest.jpg", - "/_ipx/s_300x300/images/tacos.svg", - "/_ipx/s_300x300/unsplash/photo-1606112219348-204d7d8b94ee", -] -`; - -exports[`browser (ssr: true) > layer0 should render images 1`] = ` -[ - "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&height=200", - "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&width=50", - "https://opt.moovweb.net/?img=https://i.imgur.com/LFtQeX2.jpeg&quality=10", -] -`; - -exports[`browser (ssr: true) > netlifyImageCdn should render images 1`] = ` -[ - "https://netlify-photo-gallery.netlify.app/.netlify/images?w=100&h=100&fit=cover&url=%2Fimages%2Fapple.jpg", - "https://netlify-photo-gallery.netlify.app/.netlify/images?w=400&h=300&url=%2Fimages%2Fapple.jpg", -] -`; - -exports[`browser (ssr: true) > none should render images 1`] = ` -[ - "/images/colors.jpg", - "/images/everest.jpg", - "/images/tacos.svg", - "https://images.unsplash.com/photo-1606112219348-204d7d8b94ee", -] -`; - -exports[`browser (ssr: true) > prepr should render images 1`] = ` -[ - "https://nuxt-prepr-demo.stream.prepr.io/q_5/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", - "https://nuxt-prepr-demo.stream.prepr.io/h_200/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", - "https://nuxt-prepr-demo.stream.prepr.io/w_200/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", - "https://nuxt-prepr-demo.stream.prepr.io/w_200,h_200/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", - "https://nuxt-prepr-demo.stream.prepr.io/w_250,h_250/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", - "https://nuxt-prepr-demo.stream.prepr.io/c_southeast,w_250,h_200/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", - "https://nuxt-prepr-demo.stream.prepr.io/c_centre,w_250,h_200/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", - "https://nuxt-prepr-demo.stream.prepr.io/w_250,h_200,fit_crop/4rhkcc7xzk7d-claymemoirscom-spider-pic.jpg", -] -`; - -exports[`browser (ssr: true) > prismic should render images 1`] = ` -[ - "https://images.prismic.io/200629-sms-hoy/f596a543-d593-4296-9abd-3d3ac15f1e39_ray-hennessy-mpw37yXc_WQ-unsplash.jpg?auto=compress,format&w=600&h=900", - "https://images.prismic.io/200629-sms-hoy/f596a543-d593-4296-9abd-3d3ac15f1e39_ray-hennessy-mpw37yXc_WQ-unsplash.jpg?auto=compress,format&w=200&h=900", - "https://images.prismic.io/200629-sms-hoy/f596a543-d593-4296-9abd-3d3ac15f1e39_ray-hennessy-mpw37yXc_WQ-unsplash.jpg?auto=compress,format&w=600&h=200", - "https://images.prismic.io/200629-sms-hoy/f596a543-d593-4296-9abd-3d3ac15f1e39_ray-hennessy-mpw37yXc_WQ-unsplash.jpg?auto=compress,format&w=200&h=200&fit=crop", -] -`; - -exports[`browser (ssr: true) > sanity should render images 1`] = ` -[ - "https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?auto=format", - "https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?w=200&h=200&fit=scale&auto=format", - "https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?w=200&h=200&fit=crop&auto=format", - "https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?w=200&h=200&fit=fill&auto=format&bg=ffffff", - "https://cdn.sanity.io/images/zp7mbokg/production/G3i4emG6B8JnTmGoN0UjgAp8-300x450.jpg?w=200&rect=71,4,229,280&fp-x=0.4469178082191783&fp-y=0.32778302629507167&auto=format", -] -`; - -exports[`browser (ssr: true) > sirv should render images 1`] = ` -[ - "https://demo.sirv.com/test.png?w=750&q=75", - "https://demo.sirv.com/harris-large.jpg?w=500&format=png", - "https://demo.sirv.com/lacoste.jpg?crop.type=trim&w=500&q=95", - "https://demo.sirv.com/look-big.jpg?h=500&scale.option=fit", - "https://demo.sirv.com/look-big.jpg?crop.type=face&h=500", - "https://demo.sirv.com/QW.pdf?page=1&w=500", - "https://demo.sirv.com/look-big.jpg?text=Hello&text.align=center&text.position.gravity=south&text.background.color=ffff&text.size=60&text.font.family=Arial&text.color=white&h=500", - "https://demo.sirv.com/t-shirt-man.jpg?watermark=/watermark-v1.png&watermark.position=center&watermark.scale.width=30%&h=500", -] -`; - -exports[`browser (ssr: true) > storyblok should render images 1`] = ` -[ - "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg", - "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/500x500", - "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/500x0", - "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/0x500", - "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/fit-in/200x200", - "https://a.storyblok.com/f/39898/3310x2192/e4ec08624e/demo-image.jpeg/m/200x0/filters:format(webp)", - "https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg/m/600x130", - "https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg/m/600x130", - "https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg/m/600x130", - "https://a.storyblok.com/f/39898/2250x1500/c15735a73c/demo-image-human.jpeg/m/600x130", -] -`; - -exports[`browser (ssr: true) > strapi should render images 1`] = ` -[ - "http://localhost:1337/uploads/4d9z1eiyo2gmf6gd7xhp_823ae510e8.png", - "http://localhost:1337/uploads/thumbnail_4d9z1eiyo2gmf6gd7xhp_823ae510e8.png", - "http://localhost:1337/uploads/small_4d9z1eiyo2gmf6gd7xhp_823ae510e8.png", - "http://localhost:1337/uploads/medium_4d9z1eiyo2gmf6gd7xhp_823ae510e8.png", - "http://localhost:1337/uploads/large_4d9z1eiyo2gmf6gd7xhp_823ae510e8.png", -] -`; - -exports[`browser (ssr: true) > unsplash should render images 1`] = ` -[ - "https://images.unsplash.com/photo-1606112219348-204d7d8b94ee?w=300&h=300&fm=auto&q=75&fit=crop", - "https://images.unsplash.com/photo-1532236204992-f5e85c024202?crop=entropy&cs=tinysrgb&ixid=MnwxOTgwMDZ8MHwxfHNlYXJjaHwyOHx8dG9reW98ZW58MHx8fHwxNjczNzk3MDIz&w=300&h=300&fm=auto&q=75&fit=crop", -] -`; - -exports[`browser (ssr: true) > uploadcare should render images 1`] = ` -[ - "https://ucarecdn.com/c160afba-8b42-45a9-a46a-d393248b0072/-/resize/512x512/", - "https://ucarecdn.com/4740215e-ed0f-478f-8dbd-4859d8ea4e60/-/resize/512x/", - "https://ucarecdn.com/2e36710d-21ea-42b3-ac9e-3caa80f7e7bc/-/resize/x512/", - "https://ucarecdn.com/678053e2-ad98-42be-8443-e114b8a1b294/-/scale_crop/1080x300/center/", - "https://ucarecdn.com/034e80f0-14af-408a-9eae-1e233c361256/-/setfill/000000/-/resize/1080x300/-/stretch/off/", - "https://ucarecdn.com/6d7dd597-a829-4f03-a3cc-f87ff8a94d14/-/smart_resize/1080x300/", - "https://ucarecdn.com/beb68506-f5c3-4b85-8d8c-143ad62d5390/-/smart_resize/1080x300/", - "https://ucarecdn.com/31e84033-f22e-4ed0-9462-76f9179e13e1/-/smart_resize/1080x300/", -] -`; - -exports[`browser (ssr: true) > vercel should render images 1`] = ` -[ - "https://image-component.nextjs.gallery/_next/image?url=%2Fcolors.jpg&w=750&q=75", -] -`; - -exports[`browser (ssr: true) > wagtail should render images 1`] = ` -[ - "https://cms.demo.nypr.digital/images/329944/original|format-webp|webpquality-70", - "https://cms.demo.nypr.digital/images/329944/fill-600x600-c0|format-webp|webpquality-70", - "https://cms.demo.nypr.digital/images/329944/width-250|format-webp|webpquality-70", - "https://cms.demo.nypr.digital/images/329944/height-250|format-webp|webpquality-70", - "https://cms.demo.nypr.digital/images/329944/fill-600x600-c0|format-jpeg|jpegquality-70", - "https://cms.demo.nypr.digital/images/329944/fill-600x600-c0|format-jpeg|jpegquality-2", - "https://cms.demo.nypr.digital/images/329944/fill-200x200-c100|format-webp|webpquality-70", -] -`; - -exports[`browser (ssr: true) > weserv should render images 1`] = ` -[ - "https://wsrv.nl/?filename=200&we&output=webp&url=https://picsum.photos/200", - "https://wsrv.nl/?filename=200&we&mask=circle&output=webp&url=https://picsum.photos/200", - "https://wsrv.nl/?filename=200&we&mask=circle&filt=sepia&output=webp&url=https://picsum.photos/200", - "https://wsrv.nl/?filename=200&we&mask=circle&filt=sepia&output=webp&url=https://picsum.photos/200", -] -`;