封装图片组件

src/components/LabAndImg/index.module.scss

@@ -0,0 +1,17 @@
+
+.labAndImg_main{
+    width: 100%;
+    height: 100%;
+    .boxColor{
+        width: 100%;
+        height: 100%;
+        border-radius: 20px;
+        border:1PX solid #818181;
+    }
+    image{
+        width: 100%;
+        height: 100%;
+        border-radius: 20px;
+    }
+
+}

src/components/LabAndImg/index.tsx

@@ -0,0 +1,30 @@
+import { formatImgUrl } from "@/common/fotmat";
+import { Image, View } from "@tarojs/components";
+import { memo, useMemo } from "react";
+import styles from './index.module.scss'
+
+//该组件宽高为100%需调整外层元素宽高
+type Param = {
+    value?: { 
+        texture_url?: string, //纹理图路径
+        lab?: {l:number, a:number, b:number}, //lab
+        rgb?: {r:number, g:number, b:number} //rgb
+    }
+}
+export default memo(({value}:Param) => {
+    //lab是否都是0
+    const rgbStyle = useMemo(() => {
+        if(value?.lab&&(value.lab.l||value.lab.a||value.lab.b)) {
+            return {'backgroundColor':`rgb(${value.rgb?.r} ${value.rgb?.g} ${value.rgb?.b})`}
+        } else {
+            return null
+        }
+    }, [value])
+    return (
+        <View className={styles.labAndImg_main}>
+            {value?.texture_url&&<Image mode="aspectFill" src={formatImgUrl(value?.texture_url)}></Image>}
+            {(!value?.texture_url&&rgbStyle)&&<View className={styles.boxColor} style={{...rgbStyle}}></View>}
+            {(!value?.texture_url&&!rgbStyle)&&<Image mode="aspectFill" src={formatImgUrl('')}></Image>}
+        </View>
+    )
+})