修改image组件的类型

src/components/image/index.tsx

@@ -1,11 +1,38 @@
-import { useMemo } from "react";
-import { useEffect, useState, memo } from "react";
-import { getImageSize, getResizeHeight, fallbackUrl, ImageSize } from "./tool";
+import { useMemo, useState } from "react";
+import {
+  getImageSize,
+  getResizeHeight,
+  fallbackUrl as DefaultFallbackUrl,
+  ImageSize,
+} from "./tool";
 
+/**
+ * @description Image组件参数
+ */
 type ImageProps = {
+  /**
+   * @description 图片的url
+   * @example "www.example.com/1.jpg"
+   */
   url: string;
+  /**
+   * @description 图片失效的兜底图片url
+   * @example "www.example.com/fallback.jpg"
+   * 建议提供base64版本
+   */
+  fallbackUrl?: string;
+  /**
+   * @description 图片默认宽度，因为自适应的原因最终效果可能大于该宽度
+   * @default 180
+   * @example 180
+   */
+  width?: number;
 };
 
+/**
+ * @description 图片预加载hook
+ */
+
 function useLoading(url: string) {
   const [obj, setObj] = useState<ImageSize & { isLoaded: boolean }>({
     width: 0,
@@ -25,16 +52,25 @@ function useLoading(url: string) {
   return obj;
 }
 
-export default function Image({ url }: ImageProps) {
+/**
+ *@description 图片组件库，默认支持图片加载fallback。
+ */
+
+export default function Image({
+  url,
+  width = 180,
+  fallbackUrl = DefaultFallbackUrl,
+}: ImageProps) {
   const res = useLoading(url),
-    { isLoaded, success } = res;
-  // console.log(res);
+    { isLoaded, success } = res,
+    real_width = width || 180,
+    real_fallback_url = fallbackUrl || DefaultFallbackUrl;
   return (
     <div>
       <img
-        width={180}
-        height={getResizeHeight(res, 180)}
-        src={isLoaded && success ? url : fallbackUrl}
+        width={real_width}
+        height={getResizeHeight(res, real_width)}
+        src={isLoaded && success ? url : real_fallback_url}
         style={{
           opacity: isLoaded ? 1.0 : 0.09,
         }}

src/components/image/tool.ts

@@ -1,4 +1,8 @@
-import { Once } from "@utils/index";
+/**
+ * @description 图片数据
+ * @example { width:700;height:700;again:false;success:true}
+ * {success:false}
+ */
 export type ImageSize =
   | {
       width: number;
@@ -10,7 +14,7 @@ export type ImageSize =
       success: false;
     };
 /**
- * image组件的工具库
+ * @description 提前请求图片，获取图片的大小。
  */
 export function getImageSize(imageSrc: string): Promise<ImageSize> {
   return new Promise((resolve, reject) => {
@@ -39,6 +43,10 @@ export function getImageSize(imageSrc: string): Promise<ImageSize> {
   });
 }
 
+/**
+ * @description 获取图片经过缩略的大小，默认提供fallback处理。返回数字为5的整数倍。
+ */
+
 export function getResizeHeight(imageSizeObj: ImageSize, realwidth: number) {
   const res = Math.ceil((100 + Math.ceil(Math.random() * 100)) / 5) * 5;
   if (
@@ -53,5 +61,8 @@ export function getResizeHeight(imageSizeObj: ImageSize, realwidth: number) {
   return isNaN(realheight) ? res : Math.ceil(realheight / 5) * 5;
 }
 
+/**
+ * @description 图片加载失败的fallback图片，已经过base64处理。
+ */
 export const fallbackUrl =
   "data:image/png;base64,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";