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() 它的作用是拼接路径,其传参个数没有限制,每个参数均表示一段路径。
path.resolve('/foo/bar', './baz') // returns '/foo/bar/baz'
path.resolve('/foo/bar', 'baz') // returns '/foo/bar/baz'
path.resolve('/foo/bar', '/baz') // returns '/baz'
path.resolve('/foo/bar', '../baz') // returns '/foo/baz'
path.resolve('home','/foo/bar', '../baz') // returns '/foo/baz'
path.resolve('home','./foo/bar', '../baz') // returns '/home/foo/baz'
path.resolve('home','foo/bar', '../baz') // returns '/home/foo/baz'
从后向前,若字符以 / 开头,不会拼接到前面的路径(因为拼接到此已经是一个绝对路径);若以 ../ 开头,拼接前面的路径,且不含最后一节路径;若以 ./ 开头 或者没有符号 则拼接前面路径;
3、在开发时,当我们使用path.resolve()拼接路径时,会遇到需要使用绝对路径的情况,但是当我们把项目部署到服务器时,绝对路径会发生变化。因此,需要一个可以计算的绝对路径的表达方式。有了__dirname,我们就可以解决以下问题。__dirname, 在所有情况下,该变量都表示当前运行的js文件所在的目录。