You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
60 lines
1.4 KiB
60 lines
1.4 KiB
import {FC, useEffect, useState} from "react";
|
|
import {Image, ImageProps, View} from "@tarojs/components";
|
|
import {AtActivityIndicator} from "taro-ui";
|
|
import shard from '@/static/img/shard.png'
|
|
|
|
interface Props extends ImageProps {
|
|
width: number
|
|
height: number
|
|
fallback?: string
|
|
}
|
|
|
|
const Img: FC<Props> = ({src, mode = 'aspectFill', width, height, fallback = shard}) => {
|
|
const [isError, setIsError] = useState(false)
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
useEffect(() => {
|
|
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='加载中...'/>
|
|
}
|
|
{
|
|
isError && !loading &&
|
|
<Image mode={'aspectFill'} src={fallback} style={{width: `${width}rpx`, height: `${height}rpx`}}></Image>
|
|
}
|
|
</View>
|
|
)
|
|
}
|
|
|
|
export default Img
|
|
|