IPX Provider Prefix Breaks in Prod Build when using S3 for serving images

[tcampbPPU]

I originally posted this issue over in the nuxt content repo since it's only an issue for me when I updated that dependency. Up until the latest release i could override this in my nuxt config:

  runtimeConfig: {
    public: {
      mdc: {
        useNuxtImage: false,
      },
    },
  },

I can no longer use that option. The issue is the dev mode and prod build do not create a consisint image url, adding the _ipx prefix breaks for me when using s3 to host my images since that path is no longer the expected path

Environment

• Operating System: Darwin
• Node Version: v20.12.2
• Nuxt Version: -
• CLI Version: 3.12.0
• Nitro Version: -
• Package Manager: unknown
• Builder: -
• User Config: -
• Runtime Modules: -
• Build Modules: -

Reproduction

can submit reproduction repo if needed

Describe the bug

Prior to version v2.13.0 & v2.13.1 if i added an image inside my markdown content

![Sample Image](/blog/example.png)

I would expect the file to exist like http://localhost:3000/blog/example.png As that is how its working on v2.12.1

but now after upgrading this url is now http://localhost:3000/_ipx/_/blog/example.png

where does this /_ipx/_/blog/ path get created, is there a way to change so it works like in previous versions?

This is a breaking changes since using something like AWS CloudFront/S3 this image paths are broken

[tcampbPPU]

Is there any way to set my baseUrl for IPX so I can keep the /blog/example.png path?

[mhdevfr]

I have same issue using Node V20.18

[tcampbPPU]

@mhdevfr I ended up building a custom provider:

app/providers/s3.ts

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

const operationsGenerator = createOperationsGenerator()

export const getImage: ProviderGetImage = (src, { modifiers = {}, baseURL } = {}) => {
  if (!baseURL)
    baseURL = useRuntimeConfig().public.webURL // localhost:3000

  const operations = operationsGenerator(modifiers)

  const url = joinURL(baseURL, src + (operations ? `?${operations}` : ''))

  return {
    url,
  }
}

nuxt.config.ts

  image: {
    providers: {
      s3: {
        provider: './app/providers/s3',
        options: {},
      },
    },
    provider: 's3',
  },

Then I needed to resize my images, something like:

![Example Img](/imgs/example.png){:width="100%"}