Next Js Image component

[ghost]

Thanks for making this amazing package. But how can I use it with Image component in next js. Please show me an example.

[rpearce]

@studywithdesign I rarely use NextJS, so I'm a bit unhelpful there, but this issue and comment might be helpful.

[rpearce]

Update: You should be able to wrap your nextjs image component in the <Zoom></Zoom> component, and it should work fine.

[Letre2]

How can I use it for images in a Markdown File (in a Next.js blog)? I already tried to warp the hole container in a component but it always just works for the first images. At the other images only the magnifying glass icon appears but its not possible to zoom the Image. Does any one else has the same problem?

[rpearce]

@Letre2 I've never used a nextjs blog, so please forgive my ignorance around that.

It sounds like you're asking a similar question as the person in #331.

My answer there was:

This project has never purposefully supported zooming more than 1 image inside of a component.

Instead, each instance of an image should be wrapped in a component.

Does this help answer your question? Do you have an example project to share that I could look at to understand better?

[rpearce]

I understand this question better now. I don't currently have an answer, as each image needs to be wrapped in this component, and you're working in Markdown... 🤔

[Letre2]

Yes, my solution was to switch to MDX and then it’s possible to wrap everyone in a Zoom Tag, since it’s possible to import packages with MDX. But thanks so much for your response!

[korompaiistvan]

for people stumbling on this. the solution is exactly as @Letre2 says. switch to a markdown renderer/serializer that allows you to define custom components for images. more specific advice depends on a lot of things, but looking around MDX related solutions will usually help, as custom component support is the main distinction between mdx and markdown