@ezbuy/smartimage

SmartImage

图片七牛CDN优化。图片瘦身，原图兜底。

使用场景

任何有图片请求的地方。尤其是列表页和详情页。

特性

• 原图转为七牛 CDN 图片请求
• 支持七牛 CDN 瘦身处理(图片优化)
• 内部处理图片回滚逻辑，顺序为：指定规格webp -> 去掉规格webp -> 指定规格jpg -> 去掉规格 jpg -> 原图(最后)
• 支持懒加载
• 支持 Ezbuy，兰亭，天猫淘宝，京东 图片根据规格自动瘦身优化

用法

$ yarn add @ezbuy/smartimage

import SmartImage from “smartimage”;
...

<ul className={s.wrap}>
    {this.state.data.map((d, i) => (
        <li key={i}>
            <SmartImage
                src={d.src}
                online={true}
                qnParams={{ w: 200, h: 200 }}
                isLazyLoad={d.lazy}
            />
        </li>
    ))}
</ul>

interface SmartImageProps {
	/** 是否为测试环境 测试环境和生产使用的七牛 CDN 域名不同 仅对 ezbuy 有效 */
	online: boolean;
	qnParams?: QNParams;
	isLazyLoad?: boolean;
	src: string;
	placeholder?: string;
	fallbackSrc?: string | false;
	// aliSize: 1, 2, 3... => 100px, 200px, 300px...，图片只能是正方形
	aliSize?: number;
	imgClass?: string;
	linkClass?: string;
	link?: string;
	style?: any;
	title?: string;
	alt?: string;
	blankLink?: boolean;
	/** 是否启用object-fit: cover */
	fit?: boolean;
	/** 加载完毕 无论最终结果是成功或者失败 */
	onFinish?: (status: Status) => void;
}