react-zmage 使用(图片缩放、多张查看、放大、下载)

最新推荐文章于 2024-09-16 07:09:46 发布

lllllllN

最新推荐文章于 2024-09-16 07:09:46 发布

阅读量2k

点赞数

分类专栏：前端小知识 react 插件文章标签： javascript react js

本文链接：https://blog.csdn.net/lllllllN/article/details/106114874

版权

本文介绍如何在React应用中使用react-zmage组件，实现图片的缩放、多张查看、放大及下载功能。包括安装、基本用法和 TypeScript 支持，以及基础配置参数的设置。

摘要由CSDN通过智能技术生成

使用于查看图片、点击放大、查看多张图片、下载图片

安装

npm i react-zmage --save

使用

1.引入组件

import Zmage from 'react-zmage'

2.将页面中的 img 标签替换为 Zmage 组件

<img src="图片源连接"/>
👆 to 👇
<Zmage src="图片源连接"/>
// 现在这些图片都可以放大查看了 ！

函数调用来唤出图片

// Zmage.browsing 函数接受的参数与 <Zmage/> 组件完全一致
<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 (
        <Reac