web-dev-qa-db-fra.com

React Native - Comment charger une image locale en utilisant l'uri dans Image Component?

Je sais que nous pouvons charger l'image locale avec:

<Image source={require('folder/image.png')}/>

Mais j'ai besoin de charger l'image comme ceci:

<Image source={{uri: 'folder/image.png'}}/>

Cela fonctionne pour les images réseau mais cela ne fonctionne pas pour les images locales et même il ne donne aucune erreur pour les images locales et n'affiche pas l'image en silence. Quelqu'un peut-il dire comment charger l'image locale à l'aide de la propriété uri?

6
Purple Bytes

Si vous utilisez Expo pour créer votre React application native, cela peut aider:

1) Installez expo-asset: expo install expo-asset

2) Initialisez et définissez votre imageUri:

import {Asset} from 'expo-asset';

const imageURI = Asset.fromModule(require('../../assets/test.png')).uri;

3) Dans mon cas, j'en avais besoin sur une vignette de NativeBase:

<Thumbnail square source={{uri: imageURI}}/>

Documents: https://docs.expo.io/versions/latest/sdk/asset/

0
Colo Ghidini