Menu
I've searched around and haven't quite found the correct solution for this. I have the app displaying images no problem with uri on iOS using the following code after adding a local folder reference to the XCode project:
<Image style={styles.catimg} source={{uri: "imgs/1.png"}} />
But on Android I can't quite figure out where to put the images and how to reference them in the code. Some people have said about a folder called 'drawable-hdpi' in android/app/src/main/res/drawable-hdpi but the build fails if this folder is added there. At the moment there are mipmap folders only.
635
Component { render(){ return ( <Image source={{uri: imageUrl}} /> ); } }; To make it simple, you'll simply need to pass an object in the "source" property of the Image component, in which you'll add an "uri" attribute containing the URL of your file.
To use Image with a local file with React Native, we can call require to retrieve the image and set that as the source prop's value. to call require with a local image path. And then we set that as the source value to display the image.
To display an image from a local path in React:Download the image and move it into your src directory. Import the image into your file, e.g. import MyImage from './thumbnail. webp' . Set the src prop of the image element to the imported image, e.g. <img src={MyImage} alt="horse" /> .
The React Native Image doc is pretty good!
As of React Native 0.14, they recommend using static images like so:
<Image style={styles.catimg} source={require("./imgs/1.png")} />
Here are some benefits that you get:
However, you might still wanna use an image from the native side, if for instance, you are building a hybrid app (some UIs in React Native, some UIs in platform code).
On Android, the images will indeed be read from the android/app/src/main/res/drawable-* folders.
When you create a new React Native app, only the mipmap folders are present. The mipmap folders are for your app/launcher icons only. Any other drawable assets you use should be placed in the relevant drawable folders as before. More info here.
So you need to create at least one drawable folder, say android/app/src/main/res/drawable-hdpi, then place your image imgs_1.png in it.
Unfortunately, the drawable folders cannot contain subdirectories. More info here.
Moreover, the image name must start with a letter, and can only contain lowercase letters, numbers or the undescore character. See this, for example.
Then you'll be able to use your image like this, without the extension:
<Image style={styles.catimg} source={{uri: "imgs_1"}} />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
