如何检查图像是否从url加载[react-native]

wtzytmuj 于 2023-01-09 发布在 React

关注(0)|答案(2)|浏览(148)

这个想法是检查图像是否从一个网址加载，如果没有，我将显示另一个图像代替

import React,{useState} from 'react'
import {View, Text, StyleSheet , ImageBackground , Image} from 'react-native'

   const [isLoading, setLoading] = useState(true); //where to can handle it ?

    const ImageLoader = (props)=>{
        return (
            <ImageBackground  source={{uri: props.link}}  resizeMode = "cover">
                <Text> Title </Text>
                </ImageBackground>
        )
    }

我知道第一步是建立一个国家，但我可以处理它？

react-native

来源：https://stackoverflow.com/questions/63001507/how-to-check-if-image-is-loaded-from-url-react-native

2条答案

按热度按时间

7z5jn7bk1#

在React Native中，`<Image/>`组件& `<ImageBackground/>`组件可以传递onLoad属性，该属性接受函数。您可以执行类似以下操作...

import { useState } from 'react'
import { Text, ImageBackground } from 'react-native'

const CustomImageComponent = (props) => {

const { incomingImageLink } = props
const [isLoading, setLoading] = useState(true);
const defaultImageLink = "https://as2.ftcdn.net/v2/jpg/03/49/49/79/1000_F_349497933_Ly4im8BDmHLaLzgyKg2f2yZOvJjBtlw5.jpg"
const onImageLoaded = () => {
    setLoading(false);
    console.log("do other stuff here if you want")
}

return (
    <ImageBackground
        onLoad={onImageLoaded}
        source={{uri: isLoading ? defaultImageLink : incomingImageLink}}
        resizeMode={"cover"}
    >
        <Text>
            {isLoading ? "LOADING..." : "SUCCESSFULLY LOADED!"}
        </Text>
    </ImageBackground>
  )
}

要了解更多信息，这里有一些onLoad的文档。

赞(0）回复(0）举报 2023-01-09

jv4diomz2#

你可以通过在img标签上使用js的onload和onerror事件来实现这个功能。

赞(0）回复(0）举报 2023-01-09

我来回答

如何检查图像是否从url加载[react-native]

2条答案

在React Native中，`<Image/>`组件& `<ImageBackground/>`组件可以传递onLoad属性，该属性接受函数。您可以执行类似以下操作...

相关问题

热门标签

最新问答

如何检查图像是否从url加载[react-native]

2条答案

在React Native中，<Image/>组件& <ImageBackground/>组件可以传递onLoad属性，该属性接受函数。您可以执行类似以下操作...

相关问题

热门标签

最新问答

在React Native中，`<Image/>`组件& `<ImageBackground/>`组件可以传递onLoad属性，该属性接受函数。您可以执行类似以下操作...