javascript - 如果 Image url 在 react native 中出现 404 错误，我该如何使用默认图像？

Question

如果图像 URL 出现 404 错误，我想加载默认图像。我在图像道具中尝试了 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

在这种情况下，如何将默认网址置于错误中

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

并且在源

       source={{uri:imageUrl}}

Answer 2

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

var defaultImage = yourDefaultImageURl 

在你的形象中

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