Image path changed in when linking images in markdown content

[tcampbPPU]

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

Additional context

No response

Logs

No response

[yistc]

That's due to the use of @nuxt/image module. If you are not using the module, simply remove it from your nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    '@vueuse/nuxt',
    // '@nuxt/image',
  ],
}

This works for me. Alternatively, maybe remove the @nuxt/image package. I didn't find a way, though, to opt out @nuxt/content from using the package, so that I can use @nuxt/image in other cases, but not for local image linked in markdown files.

[yistc]

I didn't find a way, though, to opt out @nuxt/content from using the package

Actually we can do this, by setting useNuxtImage to false in runtime config.

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

[github-actions[bot]]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 30 days.

[tcampbPPU]

issue again with the latest v2.13.4

[farnabaz]

As you brought it up, useNuxtImage runtime config in removed due to some issues.

A proper solution to ignore using <NuxtImage> for markdown images, is to create ~/components/content/ProseImg.vue and use simple <img tag. Markdown renderer will use your component to render images, and you have fill control over images.

[github-actions[bot]]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 30 days.