docusaurus-plugin-image-zoom-plus
v1.0.1
Published
这是一个适用docusaurus V3版本的图片放大插件, 原有docusaurus-plugin-image-zoom插件不支持docusaurus V3版本
Maintainers
Readme
docusaurus-plugin-image-zoom-plus
这是一个适用docusaurus V3版本的图片放大插件, 原有docusaurus-plugin-image-zoom插件不支持docusaurus V3版本
usage
- 在tsx中引入并使用
import { ZoomImg } fronm 'docusaurus-plugin-image-zoom-plus/components'
<ZoomImg
alt="Preview"
src="https://images.unsplash.com/photo-1680849488349-21138e052432?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80"
decoding="async"
loading="lazy"
style={{ width: '300px' }}
/>- 在md中直接使用
首先需要配置docusaurus.config.js|ts中的plugins选项
plugins: ['docusaurus-plugin-image-zoom-plus'],然后![]()markdown 语法的图片格式,会自动处理为可放大图片.需要注意的是,对于很小的图片, 点击后是没有放大效果的,因为web的特性
大图放置于小容器中,点击才会按照宽高比进行transform scale放大, 小图的scale为1,因此无放大效果
