next13的图像放大/缩放包?

huangapple go评论54阅读模式
英文:

Image magnification / zoom package for next13?

问题

Next.js 13 / bootstrap 5 网站,我需要能够放大插图。当您点击图像时,它会全屏显示,可以这么说。我希望使用 next/image 来实现这个功能,但我在文档中没有看到这个功能。

在寻找解决方案时,我调查了 react-image-magnify、fast-image-zoom 和 next-image-zoom。我已经选择了 react-image-magnify,但它不适用于 react 18,它需要 react 16,而 nextjs 13 需要 react 18。

我只是想知道在 Next 13 中放大图像的标准包是什么?只需点击图像,页面就会放大显示图像。

对于这个平台还很新,对于下面的 resolve-report.txt 解决方案还在犹豫,我在想这可能不是一个好主意?

修复上游依赖冲突,或者使用 --force 或 --legacy-peer-deps 重新运行此命令,以接受不正确(可能已损坏)的依赖解析。

英文:

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.

答案1

得分: 0

如果您选择使用 'react-image-magnify',请记住您将不再使用 'next/image' 组件,这意味着您将无法访问其默认的优势。然而,可能您想要实现的功能在 'react-image-magnify' 包中缺失。

如果您打算使用 'next/image' 开发自定义解决方案,可能需要使用其 'ref' 属性。我相信这个特定功能只在 'next/image' 版本 13.0.6 及更高版本中可用。

英文:

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.

huangapple
  • 本文由 发表于 2023年7月31日 22:43:19
  • 转载请务必保留本文链接:https://go.coder-hub.com/76804713.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定