Que ce soit une image provenant du web, ou une image stockée sur vos serveurs (comme l'avatar d'un utilisateur par exemple), la seule information que vous aurez à votre disposition pour accéder à cette dernière sera une simple URL.

Hors la plupart des exemples disponibles sur le web pour insérer une image dans votre application React-Native sont présentés avec des fichiers disponibles en local et importés avec la directive "import".

Voici donc la solution pour insérer une image à partir d'une URL externe dans votre application :

//MyComponent.js
import React from 'react';
import { Image } from 'react-native';

const imageUrl = "https://images.unsplash.com/photo-1526045612212-70caf35c14df";

export class MyComponent extends React.Component {
  render(){
    return (
      <Image source={{uri: imageUrl}} />
    );
  }
};

Pour faire simple, il vous suffira de passer un objet à la propriété "source" de votre composant Image, dans lequel vous ajouterez un attribut "uri" contenant l'URL de votre fichier.

Pour plus d'informations sur les différents attributs que peut prendre cet objet, je vous conseille d'aller jeter un oeil à la documentation officielle : https://reactnative.dev/docs/image#imagesource

J'espère que cet article vous aura été utile, et à bientôt sur le blog !

À propos de l'auteur

Hello, je suis Nicolas Brondin-Bernard, ingénieur web indépendant depuis 2015 passionné par le partage d'expériences et de connaissances.

Aujourd'hui je suis aussi coach pour développeurs web juniors, tu peux me contacter sur nicolas@brondin.com, sur mon site ou devenir membre de ma newsletter pour ne jamais louper le meilleur article de la semaine et être tenu au courant de mes projets !

Photo par freestocks sur Unsplash