Question

Android上的React Native存在一个长期存在的问题，如果uri发出重定向，<Image/>组件将无法加载图像。例如：

<Image source={uri: 'https://example.com/image.jpg'}/>

如果https://example.com/image.jpg通过重定向（301,302等）回复https://example.com/redirect.jpg，<Image/>组件将无法加载图片。

是否可以加载重定向后的图片？

Answer 1

虽然<Image/>组件不遵循重定向，但是fetch确实可以用来获取新的uri。

export const getRedirect = async (uri)=>{
    const response = await fetch(uri)
    const data = await response
    return (data.status === 200 ? data.url : '')
}

然后可以在这样的新组件中使用它：

class RedirectImage extends React.PureComponent {
    constructor(props) {
        super(props)
        this.state = {uri: ''}
    }

    componentDidMount() {
        getRedirect(this.props.uri).then((uri)=>{
            this.setState({uri: uri})
        })
    }

    render() {
        return (
            <Image
                {...this.props}
                source={{uri: this.state.uri}}
            />
        )
    }
}

RedirectImage.propTypes = {
    uri: PropTypes.string.isRequired,
}

export default RedirectImage

现在<RedirectImage uri={'https://example.com/image.jpg'}/>会根据需要显示https://example.com/redirect.jpg。

使用React Native在Android上没有重定向的远程图像

1 个答案: