React Native - How to load local image using the u

问题:

I know we can load the local image with:

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

But i need to load the image like this:

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

It works for network images but it doesn't work for local images and even it does not give any error for local images and silently does not display the image. Can anyone tell how to load the local image using the uri property?

回答1:

These are the three ways to render images in react-native , In your case you can encode the image

• you can require image

  source={require('/react-native/img/favicon.png')}

• you can get image from web

  source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}}

• or you can encode the image

  source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}}

as doc suggested as below

export default class DisplayAnImage extends Component {
  render() {
    return (
      <View>
        <Image
          source={require('/react-native/img/favicon.png')}
        />
        <Image
          style={{width: 50, height: 50}}
          source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}}
        />
        <Image
          style={{width: 66, height: 58}}
          source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}}
        />
      </View>
    );
  }
}

or you can create a json file that contains the encoded string of the image image.json

{imageString: '64encodedString'}

them import the file

import image from 'image.json';

then image

<Image source:{{uri:image.imageString}} />

回答2:

In case you are using Expo to build your React Native application, this might help:

1) Install expo-asset: expo install expo-asset

2) Initialize and set your imageUri:

import {Asset} from 'expo-asset';

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

3) In my case, I needed it on a Thumbnail from NativeBase:

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

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