Image doesn't appear in the view in react-native app-CodePudding

I have creacte one react-native project and under this folder I created one other floder witch contain one image. I want display this image, so I used the image view, as you see below

`<Image source = {{ url:'D:\PROJET_TRAQUEUR\React_learn\myfirstreactapp\node_modules\image\photo.jpg' }} style = {{width:200, height: 200}}

/>`

You can also see one imag by clicing the following link , that shows all My code and their result.

But when i ran it, the image not appeared. What is wrong?

Thanks for your helps!

CodePudding user response：

As the image is a static resource use require instead of url like this:

<Image source={require('D:\PROJET_TRAQUEUR\React_learn\myfirstreactapp\node_modules\image\photo.jpg')} style={{width:200, height: 200}}
 />

CodePudding user response：

If you are using local Image then in the place url we need to pass require. For example please check below code:

<Image
        source={require('./assets/icons/abc.png')}
        style={{
          height: 200
          width: 200
          
        }}
      />

CodePudding user response：

If you use any image in a local then simple pass in require('//path')

source={require('./assets/icons/abc.png')}

or using url you need to pass uri

source={{uri: 'https://reactnative.dev/img/tiny_logo.png'}}

also, One more thing if you use a local image then your image should be in your project root folder