本文共 1241 字，大约阅读时间需要 4 分钟。

前几天需要做一个图片放大的效果，找来找去找到了貌似现在还不支持鼠标滚轮放大缩小，但是也基本满足需求了，现在先来看一张效果图。

Video_2019-10-27_120117.gif

安装很简单

npm i react-zmage 

安装好之后就可以在页面引用了，官网有很多实例，这里是做一些简单介绍。网址在这里。

第一种方法

用Zmage替换img

<Zmage    src="https://your.image.link.jpg"    alt="最简单的使用方式"/>

第二种方法

用onClick方法

<a onClick={() => Zmage.browsing({ src:imagePath })}>任意元素</a>

第三种方法

在typescript中使用

import ReactZmage from 'react-zmage';// 在生命周期等方法中使用public componentDidMount() {    const zmage = new ReactZmage({        // ...options    });}// 也支持组件方式使用public render(): JSX.Element {    const defaultConfig = {        src: 'http://zmage.caldis.me/imgSet/childsDream/demo.jpg',        alt: '示例图片',    };    return (        <ReactZmage            {...defaultConfig}        />    );}

接下来看个简单的实例吧,先创建一个新的react项目，然后把App.js 的代码替换为本段代码即可，记得安装react-zmage

import React from 'react';import './App.css';import Zmage from 'react-zmage'function App() {    return (    <div className="App">      <header className="App-header">        <Zmage src='./tree.jpg' className="App-logo" alt="tree" /><br/>        <a onClick={() => Zmage.browsing({ src:'./tree.jpg' })}>点击显示大图片</a>      </header>    </div>  );}export default App;

想要源码的同学欢迎扫描微信公众号爱游戏爱编程，回复图片放大即可获取源码。其实也不用去获取源码，自己新建个react项目，直接把上面一段代码粘过去即可，换个图片就行。

爱游戏爱编程.jpg