如果 Image url 在 React Native 中出现 404 错误，我该如何使用默认图片？

如何解决如果 Image url 在 React Native 中出现 404 错误，我该如何使用默认图片？

如果图像 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"
            />

我该怎么做？

解决方法

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

var defaultImage = yourDefaultImageURl 

在你的图片中

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

,

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

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

在源码中

       source={{uri:imageUrl}}