React-Zmage

一、安装

npm i react-zmage 

• 安装好之后就可以在页面引用了
• 官网：https://zmage.caldis.me/

二、使用方法

1、第一种方法

• 用Zmage替换img

<Zmage src="照片地址" alt=""/>

2、第二种方法

• 用onClick方法

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

3、第三种方法

• 在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}
        />
    );
}

三、实例

• App.js

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;