React项目实现点击图片预览

Posted 2023-03-14

参考技术A 1、React项目实现点击图片预览：
“React-zmage” 一个图片放大查看组件，动画流畅简洁，使用简单方便。react-zmage 是一个基于 React 的的图片缩放控件, 使用 Zmage 标签包裹后的图片可以立即获得缩放效果, 替代原生的 img 标签,也可以实现图片的翻转。
（1）引入：import Zmage from 'react-zmage'
（2）将页面中的 img 标签替换为 Zmage
<img src="图片源连接" /> 替换为<Zmage src="图片源连接" />
现在这些图片都可以点击放大查看了 ！
2、path.resolve() 它的作用是拼接路径，其传参个数没有限制，每个参数均表示一段路径。

从后向前，若字符以 / 开头，不会拼接到前面的路径(因为拼接到此已经是一个绝对路径)；若以 ../ 开头，拼接前面的路径，且不含最后一节路径；若以 ./ 开头 或者没有符号 则拼接前面路径；
3、在开发时，当我们使用path.resolve()拼接路径时，会遇到需要使用绝对路径的情况，但是当我们把项目部署到服务器时，绝对路径会发生变化。因此，需要一个可以计算的绝对路径的表达方式。有了__dirname，我们就可以解决以下问题。__dirname， 在所有情况下，该变量都表示当前运行的js文件所在的目录。