Les images distantes ne sont pas redirigées sur Android à l'aide de React Native

Question

Il existe un problème de longue date dans React Native sur Android où le composant <Image/> ne chargera pas une image si l'uri émet une redirection. Exemple:

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

Si https://example.com/image.jpg répond par une redirection (301, 302, etc.) pour https://example.com/redirect.jpg le composant <Image/> ne charge pas l'image.

Est-il possible de charger des images qui suivent une redirection?

Answer 1

Alors que le composant <Image/> ne suit pas les redirections, fetch fait et peut être utilisé pour obtenir le nouvel uri.

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

Cela peut ensuite être utilisé dans un nouveau composant comme celui-ci:

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 

Maintenant <RedirectImage uri={'https://example.com/image.jpg'}/> affichera https://example.com/redirect.jpg comme vous le souhaitez.