next.jsnextjs-imagenext.js13

Image magnification / zoom package for next13?


Next.js 13 / bootstrap 5 site that I need to be able to enlarge illustrations. When you click on the image it goes full screen so to speak. I would prefer to do this with next/image but I dont see that functionality in the documentation.

In researching a solution I investigated react-image-magnify, fast-image-zoom, next-image-zoom. I had settled on react-image-magnify but it wont work on react 18, it needs react 16 and nextjs 13 needs react 18.

I'm just looking for what is considered a standard package for zooming images in Next 13? Just click on the image an the page is taken up with an enlargement of the image.

New to this platform and am hesitant to take the resolve-report.txt solution below, I'm thinking its probably not a good idea?

Fix the upstream dependency conflict, or retry this command with --force or --legacy-peer-deps to accept an incorrect (and potentially broken) dependency resolution.


Solution

  • If you choose to use 'react-image-magnify,' keep in mind that you won't be using the 'next/image' component anymore, which means you won't have access to its default benefits. However, it's possible that the functionality you want to achieve is missing in the 'react-image-magnify' package.

    If you intend to develop a customized solution using 'next/image,' it may be necessary to make use of its 'ref' prop. I believe that this particular feature is only available in 'next/image' from version 13.0.6 onward.