如果图像 url 在 React Native 中给出 404 错误，我如何使用默认图像？

Question

如果图像 URL 出现 404 错误，我想加载默认图像。我在 image prop 中尝试了 onError() 但它不起作用。

<Image
              onError={() => {
                setError(true);
              }}
              source={{
                uri: error
                  ? imageUrl
                  : "https://logodownload.org/wp-content/uploads/2019/07/udemy-logo-5.png",
              }}
              style={{
                height: 50,
                width: "100%",
                alignItems: "center",
                justifyContent: "center",
              }}
              resizeMode="cover"
            />

我该如何做这件事？

Answer 1

您可以在图像中使用 defaultSource 和默认图像，这会导致在提供的 imageUrl 无法加载时显示默认图像

var defaultImage = yourDefaultImageURl 

在你的形象中

    <Image
    defaultSource={defaultImage}
    source={{uri: imageUrl}}
       style={{
            height: 50,
            width: "100%",
            alignItems: "center",
            justifyContent: "center",
          }}
   resizeMode="cover"
   />

Answer 2

在这种情况下，只需将默认网址放入错误中如何

 onError={() => {       
 setImageUrl('https://logodownload.org/wpcontent/uploads/2019/07/udemy-logo-5.png');
          }}

并在源代码中

       source={{uri:imageUrl}}

Answer 3

我知道这个问题有点老了，但对于一些仍然有这个问题的人来说？ 我的答案很简单。我所做的是，假设您的服务器图像和默认图像是...

const serverImage = https://blablabla.jpg
const defaultImage= require(../defaultImage.jpg)

然后设置默认图像状态，该状态未定义或为空

const [getImage, setGetImage] = useState()

然后图像组件将具有 onError 属性，以防图像加载失败，它将把 getImage 状态设置为默认图像并将其传递给源。如果您愿意，您可能需要添加 defaultSource 属性。

<Image
  source={ getImage ? getImage : { uri: serverImage }}
  onError={() => setGetImage(defaultImage)}
  defaultSource={defaultImage}
/>