反应本机图像未出现

Question

I am using React-Native v0.60.4, running on android simulator, generates an image by using react-native-signature-capture , the image can be opened manually and show correctly. I want to display this image by using Image , but it displays nothing.

I checked but there is no error/warning message.

<Image
     style={{width: 200, height: 200}}
     source={{uri: '/storage/emulated/0/saved_signature/signature.png'}}
/>

This should be very basic usage of Image but why nothing displayed?

Answer 1

Use the imagepicker to bring the image in the path, use the image module , and look at the image .

Example

import ImagePicker from 'react-native-image-picker';
...
  ImagePicker.showImagePicker(options, response => {
        let source = response;
        this.setState({
          filePath: source,
        });

...
<Image 
          source={{ uri: this.state.filePath.uri}} 
          style={{width: 100, height: 100}} />

Answer 2

if you want to show a local image than you have to use require property instead of uri like this:-

image from local storage:-

<Image 
style={{width: 200, height: 200}}
source={require('/storage/emulated/0/saved_signature/signature.png')} />

For dynamic image or image from uri:-

<Image 
style={{width: 200, height: 200}}
source={{uri: 'https://facebook.github.io/react/logo-og.png'}} />

Answer 3

To display an image, you need to require it before

import myImage from './path_to_image.png'

<Image source={myImage} style={{ width: 200, height: 200 }} />

For more information, you have this documentation

Answer 4

You need to pass in a require() to source prop like so:

const ImageDetail = props => {
  return (
    <View>
      <Image source={require('/storage/emulated/0/saved_signature/signature.png')} />
      <Text>{props.title}</Text>
    </View>
  );
};

Make sure your path is correct as well in that its not ../storage or ../../storage .

And all this would be in your child component for example, keeping in mind that you did not specify which component you are on. Once you have ensured the image renders then you want to go to your parent component and pass it the prop of whatever name you choose, for example imageSource .

Then you pass in that require again and the relative path:

const ImageScreen = () => {
  return (
    <View>
      <ImageDetail
        title='Signature One'
        imageSource={require("/storage/emulated/0/saved_signature/signature1.png")}
      />
      <ImageDetail
        title='Signature Two'
        imageSource={require("/storage/emulated/0/saved_signature/signature2.png")}
      />
      <ImageDetail
        title='Signature Three'
        imageSource={require("/storage/emulated/0/saved_signature/signature3.png")}
      />
    </View>
  );
};

I would then console log props on that child component and if your setup is similar to whats above you should see:

{title: "Signature One", imageSource: 3}
{title: "Signature Two", imageSource: 4}
{title: "Signature Three", imageSource: 5}

The 3, 4, 5 would be an identifier so don't worry about that, but I put it there just in case you see it.

Now in your child component you can remove that require('/storage/emulated/0/saved_signature/signature.png') from your source={} prop and replace it with <Image source={props.imageSource} /> or whatever you called it.