React Native中Android端Image组件defaultSource失效，如何显示默认图片？

在React Native中，defaultSource在Android端无法处理API返回204无内容的场景——这是因为Android的Image组件仅将网络请求的异常错误（如404、500）视为加载失败，而204状态码会被判定为"请求成功但无数据"，不会触发默认图显示。以下是两种可行的解决方法：

方法一：提前请求判断图片状态 #

手动发起网络请求验证图片是否存在，再决定加载的图片源，这种方式更可靠：

import { useState, useEffect } from 'react';
import { Image } from 'react-native';

// 组件内部逻辑
const [imageSource, setImageSource] = useState({ uri: productDefaultImage });
const [imageLoading, setImageLoading] = useState(true);

useEffect(() => {
  const checkImageExists = async () => {
    const targetUrl = `${env.apiUrl}${env.productImageById.replace(':productId', price.id.toString())}?thumbnail=true`;
    try {
      const response = await fetch(targetUrl, {
        headers: { Authorization: `Bearer ${token}` },
        method: 'HEAD' // 仅获取响应头，减少数据传输
      });
      // 状态码为200时使用目标图片，否则保持默认
      if (response.status === 200) {
        setImageSource({
          uri: targetUrl,
          headers: { Authorization: `Bearer ${token}` }
        });
      }
    } catch (err) {
      setImageSource({ uri: productDefaultImage });
    } finally {
      setImageLoading(false);
    }
  };

  checkImageExists();
}, [price.id, token]);

// 渲染Image组件
return (
  <Image
    source={imageSource}
    resizeMode="contain"
    style={{ width: 100, height: 70 }}
  />
);

方法二：利用onError回调切换默认图 #

通过Image组件的onError事件，在加载失败时切换到默认图。注意：部分场景下204状态码可能不会触发onError，建议结合实际业务测试：

import { useState } from 'react';
import { Image } from 'react-native';

// 组件内部逻辑
const [imageSource, setImageSource] = useState({
  uri: `${env.apiUrl}${env.productImageById.replace(':productId', price.id.toString())}?thumbnail=true`,
  headers: { Authorization: `Bearer ${token}` }
});
const [imageLoading, setImageLoading] = useState(true);

const handleImageLoadError = () => {
  setImageSource({ uri: productDefaultImage });
};

// 渲染Image组件
return (
  <Image
    source={imageSource}
    resizeMode="contain"
    style={{ width: 100, height: 70 }}
    onLoadEnd={() => setImageLoading(false)}
    onError={handleImageLoadError}
  />
);

关键说明 #

• Android端defaultSource的设计初衷是加载过程中的占位图，而非加载失败后的兜底图，因此无法处理204这类"成功但无内容"的响应。
• 方法一使用HEAD请求仅获取响应头，相比GET请求更高效，避免不必要的图片数据传输。

内容的提问来源于stack exchange，提问作者DarkSide77