React Native中FastImage加载失败时显示本地兜底图片的问题

你当前的代码仅判断了ProfilePic是否为null，但当图片URL无效或加载失败时没有处理。可以通过FastImage的onError回调结合组件状态，实现加载失败时显示本地兜底图，具体修改如下：

1. 修改AllUserlist组件，添加状态管理 #

在AllUserlist组件中引入useState和useEffect，用来跟踪图片加载状态：

import React, { useState, useEffect } from 'react';
// 其他导入保持不变

const AllUserlist = (props) => {
  // 标记图片是否加载失败
  const [isImageLoadFailed, setIsImageLoadFailed] = useState(false);

  // 当ProfilePic变化时重置加载状态，避免FlatList复用组件导致状态残留
  useEffect(() => {
    setIsImageLoadFailed(false);
  }, [props.ProfilePic]);

  // 图片加载失败触发的回调
  const handleImageError = () => {
    setIsImageLoadFailed(true);
  };

  // 确定最终显示的图片源
  const getImageSource = () => {
    if (!props.ProfilePic || isImageLoadFailed) {
      return images.person_icon;
    }
    return { uri: props.ProfilePic };
  };

  // 确定resizeMode
  const getResizeMode = () => {
    return (!props.ProfilePic || isImageLoadFailed) ? 'contain' : 'cover';
  };

  return (
    <TouchableOpacity onPress={props.OnPressItem} activeOpacity={0.5}>
      <View>
        {props.Email === null ? null : (
          <View
            style={{
              height: hp(8),
              justifyContent: 'space-evenly',
              flexDirection: 'row',
              alignItems: 'center',
              marginVertical: hp(0.7),
            }}>
            <View style={{ borderRadius: 100, overflow: 'hidden' }}>
              <FastImage
                source={getImageSource()}
                style={{
                  height: hp(7.2),
                  width: wp(14.7),
                  resizeMode: getResizeMode(),
                }}
                onError={handleImageError} // 绑定加载失败回调
              />
            </View>
            <View style={{ flex: 1, marginLeft: wp(4) }}>
              <Text
                numberOfLines={1}
                ellipsizeMode="tail"
                style={{
                  color: props.DarkTheme ? Colours.white : Colours.black,
                  fontSize: 20,
                  fontFamily: Fonts.Montserrat.SemiBold,
                }}>
                {props.UserName}
              </Text>
              <Text
                numberOfLines={1}
                ellipsizeMode="tail"
                style={{
                  color: props.DarkTheme ? Colours.white : Colours.App_black,
                  fontSize: 15,
                  fontFamily: Fonts.Montserrat.Light,
                }}>
                Email: {props.Email}
              </Text>
            </View>
          </View>
        )}
      </View>
    </TouchableOpacity>
  );
};

export default AllUserlist;

关键修改说明 #

• 加载状态管理：用isImageLoadFailed标记加载失败状态，初始为false。
• 状态重置：通过useEffect监听props.ProfilePic变化，切换头像URL时重置状态，避免FlatList组件复用导致的状态混乱。
• 失败回调绑定：给FastImage添加onError回调，加载失败时将状态设为true。
• 动态切换图片源：通过getImageSource判断，当ProfilePic为空或加载失败时返回本地兜底图，否则返回URL源。
• 适配显示模式：根据状态切换resizeMode，保证兜底图正常显示。

修改后，无论ProfilePic为空、URL无效还是网络加载失败，都会显示本地的person_icon图片。

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