taro/src/_health/components/single_img.tsx

import { rpxToPx } from "@/utils/tools";
import { View, Image } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { useEffect, useState } from "react";

export default function SingleImage(props: { url: string }) {
    const [loaded, setLoaded] = useState(false)
    const [width, setWidth] = useState(346)
    const [height, setHeight] = useState(346)
    const scale = '?x-oss-process=image/format,jpg'
    const kMax = 346
    // const 
    //346
    useEffect(() => {
        Taro.downloadFile({
            url: props.url,
            success: (res) => {
                Taro.getImageInfo({
                    src: res.tempFilePath,
                    success: function (res) {
                        console.log(res.width)
                        console.log(res.height)
                        if (res.width >= res.height) {
                            setWidth(kMax)
                            setHeight(kMax * res.height / res.width)
                        }
                        else {
                            setHeight(kMax)
                            setWidth(kMax * res.width / res.height)
                        }
                        setLoaded(true)
                    },
                    fail(res) {
                        setLoaded(true)
                    },
                })
            }
        })
    }, [])
    if (!loaded) return <View />
    return <Image src={props.url+scale}
        onClick={(e) => {
            if (process.env.TARO_ENV == 'weapp') {
                e.stopPropagation()
            }
            Taro.previewImage({
                current: props.url,
                urls: [props.url]
            })
        }}
        className="gray_bg"
        style={{
            width: rpxToPx(width),
            height: rpxToPx(height),
            marginBottom:rpxToPx(7)
        }} />
}