Question

我正在从API中获取ID列表，其中大多数ID都有关联的图像存储在本地。但是，某些ID没有图像，因此在尝试要求其来源时会返回错误。

这是我获取来源的方式：

<Image style={{height: '100%', width: '100%'}} source={require('../assets/character-images/' + this.character.id + '.jpg'))}/>

如何获得默认的备用来源？我什至不介意如果找不到图像就不加载图像...我只是无法摆脱这个错误。谢谢。

Answer 1

既然您正在加载的资产是在项目中预定义的，为什么不简单地检查是否能够加载呢？

例如，假设您有character-images/1，character-images/2，character-images/3，则可以执行以下操作：

const availableCharacterIds = ['1', '2', '3']
const assetToLoad = availableCharacterIds.includes(`${this.character.id}`) ? 
  require('../assets/character-images/' + this.character.id + '.jpg') : null

然后在渲染JSX中：

<Image style={{height: '100%', width: '100%'}} source={assetToLoad}/>

Answer 2

您可以处理图像上的onError事件，并渲染其他图像。可以在下面找到接受默认图像的示例组件。

export default class ImageWithFailback extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      hasError: false
    };
  }
  _onError = () => {
    this.setState({ hasError: true });
  }
  render() {
    const failBackImage = <Image source={this.props.default} style={this.props.style} />;

    if (this.state.hasError) return failBackImage;

    return (
      <Image
        {...this.props}
        onError={this._onError}
        renderIndicator={_ => failBackImage}
      />
    );
  }
}

Answer 3

您可以使用此小功能查看图像是否存在，然后动态决定是否渲染它：

const tryRequire = (path) => {
  try {
   return require(`${path}`);
  } catch (err) {
   return null;
  }
};

然后使用渲染方法

{this.state.ids &&
    this.state.ids.map((id) => {
        return (
            <Image style={{height: '100%', width: '100%'}} source={this.tryRequire('../assets/character-images/' + id + '.jpg') !== null ? require('../assets/character-images/' + id + '.jpg') : require('../assets/fallbackimg.png')}/>;
        );
    })}

或者如果您根本不想渲染img（没有后备img），则只需添加过滤器

{this.state.ids &&
    this.state.ids
        .filter((id) => return this.tryRequire('../assets/character-images/' + id + '.jpg') === null)
        .map((id) => {
            return (
                <Image style={{height: '100%', width: '100%'}} source={this.tryRequire('../assets/character-images/' + id + '.jpg')}/>;
    );
})}

Answer 4

要动态检查文件是否存在，可以使用fs.exist，然后将其添加到可用ID数组（如果存在），然后在渲染时可以检查要渲染的ID是否可用是否启用，如果不可用，则显示默认图像。

您可以使用以下代码检查fileExists。

checkIfFileExists=(id)=>{
RNFetchBlob.fs.exists(PATH_OF_FILE).then((exist) => {
    return exist;
})
.catch(() => return false)
}

React Native-需要使用默认源的图像源

4 个答案: