react中查看圖片大圖插件react-zmage的用法

近期react項目有使用到查看大圖這一功能,特此記錄下react-zmage的使用心得

插件官方地址
   https://zmage.caldis.me/  

使用方法

  1. yarn add react-zmage -S 或者 npm install react-zmage -S

  2. 在需要的地方引入

     import Zmage from 'react-zmage'    
    
  3. 將頁面中的img標籤替換爲Zmage 即可

       <img src="圖片源鏈接"/>
       換成
       <Zmage src="圖片源鏈接">
    

下面其它功能有要用到的夥伴自行取用

效果呈現

違法圖片

在這裏插入圖片描述

放大效果

在這裏插入圖片描述

基礎配置

在這裏插入圖片描述

高級配置

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章