nuxt / image

Plug-and-play image optimization for Nuxt applications.
https://image.nuxt.com
MIT License
1.34k stars 270 forks source link

Provider Hygraph has a new Asset API that breaks the implemented provider settings #1295

Closed areindl closed 6 months ago

areindl commented 7 months ago

Hygraph has released an all-new version of their Asset API: https://hygraph.com/docs/api-reference/assets/assets-overview#which-asset-system-does-my-project-use

I am not affiliated with Hygraph, but based on testing it if found the following breaking changes:

Legacy API:

https://media.graphassets.com/output=format:jpg/resize=width:200,height:200/85X5yqQRgm9GFqPEKM5Q

New API:

https://eu-central-1-shared-euc1-02.graphassets.com/cltmqhqjq01us08w6awv24h0x/output=format:jpg/resize=width:200,height:200/clu1nslm3ivi307uvc86wkk2f
  1. Instead of 'https://media.graphassets.com' a new regional endpoint must be used: https://eu-central-1-shared-euc1-02.graphassets.com --> this is okay as it can be configured in nuxtconfig

  2. The URL of the images changed from {baseurl}/{transformation}/{id}' to{baseurl}/{someId}{transformation}/{id}' --> this is a breaking change to the implementation: https://github.com/nuxt/image/blob/e4ea7015d14562fb3d072f0f0ae8cbccd0ed0ac4/src/runtime/providers/hygraph.ts#L41C18-L41C25

Problem

When you now use NuxtImage with


// Nuxt Config
    image: {
        hygraph: {
            baseurl: 'https://eu-central-1-shared-euc1-02.graphassets.com',
            format: ['webp'],
        },
    },

And the following NuxtImage:

             <NuxtImg
                        provider="hygraph"
                        format="webp"
                        quality="90"
                        sizes="sm:100px md:200px lg:800px"
                        fit="contain"
                        class="mx-auto h-56 w-56 rounded-full shadow-lg shadow-blue-700/25"
                         src="https://eu-central-1-shared-euc1-02.graphassets.com/cltmqhqjq01us08w6awv24h0x/clu1nslm3ivi307uvc86wkk2f"
                       />

The resulted src is :


https://eu-central-1-shared-euc1-02.graphassets.com/output=format:webp/resize=width:1600,fit:max/quality=value:90/compress/cltmqhqjq01us08w6awv24h0x/clu1nslm3ivi307uvc86wkk2f

Which is invalid and leads to a 404 error.

Unfortunately, Hygraph does not allow to switch to the old provider. Therefore NuxtImage is currently not working for Hygraph users starting from March 2024 onwards.

Suggested Solution:

Add a new provider config (e.g. hygraph-v2) to stay compatible with the legacy version.

danielroe commented 7 months ago

cc: @timbenniks