首页图片组件封装

src/components/image/image.tsx

@@ -0,0 +1,60 @@
+import {FC, useEffect, useState} from "react";
+import {Image, View} from "@tarojs/components";
+import emptyImg from '@/static/img/empty.png'
+import {AtActivityIndicator} from "taro-ui";
+
+interface Props {
+  src: string
+  mode?: "scaleToFill" | "aspectFit" | "aspectFill" | "widthFix" | "heightFix" | "top" | "bottom" | "center" | "left" | "right" | "top left" | "top right" | "bottom left" | "bottom right" | undefined
+  width:number
+  height:number
+  fallback?: string
+}
+
+const Img: FC<Props> = ({src,mode = 'aspectFill',width,height,fallback = emptyImg}) => {
+  const [isError,setIsError] = useState(false)
+  const [loading,setLoading] = useState(true)
+
+  useEffect(()=>{
+    console.log(src, !src)
+    if(!src){
+        setIsError(true)
+        setLoading(false)
+      } else {
+        setIsError(false)
+        setLoading(false)
+      }
+  },[src])
+  // 图片加载失败
+  function onErrorHandler() {
+    setLoading(false)
+    setIsError(true)
+  }
+   function onLoadHandler() {
+     setLoading(false)
+     setIsError(false)
+   }
+
+  return (
+    <View style={{width:`${width}rpx`,height:`${height}rpx`,backgroundColor:'eee'}}>
+      { !isError &&
+        <Image
+          src={src}
+          mode={mode}
+          style={{width:`${width}rpx`,height:`${height}rpx`}}
+          onError={onErrorHandler}
+          onLoad={onLoadHandler}>
+        </Image>
+      }
+      { loading &&
+        <AtActivityIndicator mode={"center"} content='加载中...'></AtActivityIndicator>
+      }
+      { isError && !loading &&
+        <Image mode={'aspectFill'} src={fallback} style={{width:`${width}rpx`,height:`${height}rpx`}}></Image>
+      }
+
+    </View>
+  )
+}
+
+export default Img

src/pages/home/components/feature_recommended.tsx

@@ -10,6 +10,7 @@ import brandTop from '@/static/img/brandTop.png'
 import illnessTop from '@/static/img/illnessTop.png'
 import healthTop from '@/static/img/healthTop.png'
 import professionTop from '@/static/img/professionTop.png'
+import Img from "@/components/image/image";
 
 
 interface DataContent {
@@ -163,8 +164,12 @@ const FeatureRecommended: FC<Props> = (props) => {
                 className='flex mb-3'
                 key={c.id}
                 onClick={() => jump(d.detailsUrl + c.path, c.id, d.type)}>
-                <View>
+                <View style={{position:'relative'}}>
-                  <Image src={c.imageUrl} className={styles.featureImage} mode='aspectFill'/>
+                  <View className={styles.featureImage} >
+                    <Img src={c.imageUrl}  height={100} width={140}></Img>
+                  </View>
+                  {/*<Image src={c.imageUrl} className={styles.featureImage} mode='aspectFill'/>*/}
+
                   <Image src={[first, second, third][index]} className={styles.ranking} mode='aspectFill'/>
                 </View>
                 <View className={styles.featureText}>

src/pages/home/home.module.scss

@@ -117,6 +117,7 @@
 }
 
 .ranking {
+  top:0;
   position: absolute;
   left: 24rpx;
   width: 30px;