Support for @nuxt/image

[giticon]

Support for @nuxt/image

[atinux]

It is planned :)

[ay13]

Is there an update on this issue?

[atinux]

No yet sorry, lot of work regarding the alpha of Nuxt 3 coming.

[narduin]

I don't know if it's officially supported but it currently works with one little "hack". When using <nuxt-img/> inside a markdown nuxt-content file, everything after the image is not rendered (don't know why).

<!-- doesn't work -->
<nuxt-img
    src="https://"
    sizes="sm:100vw xl:728px"
    width="728"
    height="412"
    loading="lazy"
/>

But explicitly closing the tag works:

<!-- works -->
<nuxt-img
    src="https://"
    sizes="sm:100vw xl:728px"
    width="728"
    height="412"
    loading="lazy">
</nuxt-img>

[nozomuikuta]

@narduin

It's written in documentation that:

Since @nuxt/content operates under the assumption all Markdown is provided by the author (and not via third-party user submission), sources are processed in full (tags included), with a couple of caveats from rehype-raw: ...

1. You cannot use self-closing tags, i.e., this won't work:

[narduin]

It's written in documentation that:

I didn't know that! So I guess nuxt-image is now supported inside of nuxt-content 😃

[atinux]

Linking to https://github.com/nuxt/image/issues/500

Once Nuxt Image supports Nuxt 3, we will be able to work on it for Content V2.

[itpropro]

@Atinux nuxt/image compatibility with Nuxt 3 started a while ago, when do you think we can expect nuxt/content integration or should it just work right now by adding the module?

[atinux]

If you can try on your project and give me back feedback on it it would be great @itpropro, don't have the time right now to check.

Our main focus is 3.0 stable release before finishing our official modules

[itpropro]

The current version of Nuxt/Content (created wiht pnpm dlx nuxi init content-app -t content) doesn't start at all anymore, as soon as Content works again, I can create a repo repository for Nuxt/Image @Atinux

[atinux]

It works for me and in Sandbox: https://stackblitz.com/github/nuxt/starter/tree/content

[itpropro]

My mistake, I created for pnpm and was expecting to not need to specify --shamefully-hoist, overlooked that in the documentation. Maybe we can add a .npmrc file with shamefully-hoist=true to the project when using pnpm dlx to bootstrap. I will test the nuxt/image module with some configs from another project and provide feedback here.

[tex0l]

Hi! I have tried on [email protected], @nuxt/[email protected] and @nuxt/[email protected], it doesn't work with :nuxt-img{src="/path/to/my/img"}, the components isn't found.

[tex0l]

see https://github.com/nuxt/content/issues/390#issuecomment-1267292231

[hartmut-co-uk]

see solution for current edge version (tested with @nuxt/image-edge:1.0.0-27821548.ab054e4) provided here: https://github.com/nuxt/content/issues/390#issuecomment-1344593577

[giticon]

Hi! I have tried on [email protected], @nuxt/[email protected] and @nuxt/[email protected], it doesn't work with :nuxt-img{src="/path/to/my/img"}, the components isn't found.

Try this <nuxt-img :src="path_img" />

[tex0l]

Hi! I have tried on [email protected], @nuxt/[email protected] and @nuxt/[email protected], it doesn't work with :nuxt-img{src="/path/to/my/img"}, the components isn't found.

Try this <nuxt-img :src="path_img" />

No it doesn't work.

However this works: https://github.com/nuxt/content/issues/390#issuecomment-1344593577