nuxt / image

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

Disable auto-detection of a specific provider #1353

Open armenr opened 1 month ago

armenr commented 1 month ago

We have a codebase that we build for multiple deployment targets, with multiple conditional configs.

We are prospecting AWS Amplify for this project, so we have a branch where we've introduced Amplify.

When we build this for mobile-only targets, we disable SSR in Nuxt...but ALL images fail to load for mobile targets. When deployed with SSR enabled (web targets), images load beautifully (and quickly, thanks for that! 🚀). For web, it works without issue on all web platforms across all device types (including mobile-web clients).

As I've been diving into debugging the issue for mobile-only targets, I've discovered that even in SSR-off/mobile-only mode, the problem is with the baseURL --> capacitor://localhost/_amplify/image?url=https:%2F%2F<SOME_DISTRIBUTION_ID>.cloudfront.net%2Fpublic%2Fiuhwa81h4jd-IMG_5904.jpeg&w=320&q=80

How can I explicitly disable the auto-detected AWS Amplify provider using some kind of environment variable or config? We're at a dead stop moving forward without knowing how to prevent this auto-detection behavior for mobile-only builds.

For context, we are using a custom provider to leverage a public-facing CloudFront CDN that caches from S3. We do that in the following way:

// providers/cloudfront-provider.ts

import { joinURL } from 'ufo'
import type { ProviderGetImage } from '@nuxt/image'
import { createOperationsGenerator } from '#image'

const operationsGenerator = createOperationsGenerator()

export const getImage: ProviderGetImage = (
  src,
  { modifiers = {}, baseURL } = {},
) => {
  if (!baseURL) {
    // also support runtime config
    baseURL = useRuntimeConfig().public.siteUrl
  }

  const operations = operationsGenerator(modifiers)

  return {
    url: joinURL(baseURL, src + (operations ? `?${operations}` : '')),
  }
}
// nuxt.config.ts

  image: {
    providers: {
      cloudfront: {
        name: 'cloudfront',
        provider: 'src/providers/cloudfront-provider.ts',
        options: {
          baseURL: `${customOutputs.custom.projectCDN.cloudfrontURL}`,
        },
      },
    },

... rest of config
armenr commented 1 month ago

In the interim - is there some recommended way to get around this?

armenr commented 1 month ago

...help, please?

armenr commented 1 month ago

Thanks for all the help, folks! Really appreciate it!