logix-o / react-aio-image

react all in one image

All In One Image

Features

• 支持懒加载
• 支持自动计算最佳显示模式，以及提供多种自定义显示模式
• 支持加载占位 & 自定义占位图
• 支持定宽图的高度自适应
• 支持服务端渲染

todo

• 支持打包svg文件
• 换一种形式的图片占位组件
• 支持图片预览
  • pc端鼠标显示放大镜
  • 深色模式
  • 显示默认图，支持查看原图
  • 从图片原始位置平移并放大显示

注意事项

安装

yarn add react-aio-image

• 务必安装[email protected]+
• 若要兼容IE浏览器，请安装polyfill

使用

• 若要使用响应式代码，务必对外联样式的width & height属性添加!important标识
• 通过设置属性mode='auto-height'，使图片高度不受限于height属性，实现自适应

开发事项

在src中进行开发，在demo提供示例

开发并调试

yarn dev
yarn demo

打包并发布

记得先修改版本号

yarn build
npm publish
// 若使用淘宝镜像
npm publish --registry http://registry.npmjs.org

参考文档

• iconfont
• 获取元素相对屏幕位置
• prefers-color-scheme
• background-image vs img

打包配置

• npm
• typescript-babel
• rollup.js
• creat-react-library-rollup-config
• avoid-mulitple-react-instance

组件库

• react-spring
• react-use-gesture
• file-saver
• react image design

动画优化

• 浏览器渲染流水线解析与网页动画性能优化
• Chrome 图片解码与 Image.decode API