I am working on a react-native project and we are putting images currently in /images/
folder. Is it a good path for them ? Is there any best practice?
In short: Any images that you import in your React components should be stored close to where they are used (preferably in the same directory). Any images that you do not import in your React components (e.g. favicons ) should be stored in your public/ directory, e.g. under a favicons/ folder.
Adding Image Let us create a new folder img inside the src folder. We will add our image (myImage. png) inside this folder. We will show images on the home screen.
You can put the image file in the public folder (or if this is not Create React App… then any folder that will be copied to the server). Then, assuming your server is treating the public folder as the “root” directory ( / ), then your images will be available relative to that – just like with plain HTML.
You can add image folder to src(src/image/index.js). Image folder add index.js file create and add whole app image. In index.js file set
export const IMAGENAME = require('./icon.png');
When import image folder
import { IMAGENAME } from '../image';
Use image:
<Image source={ IMAGENAME } />
You can add image to image folder and set path to index file. Hope this will help you.
To add a static image to your app, place it somewhere in your source code tree and reference it like this:
<Image source={require('./my-icon.png')} />
please see the below link for more explanation:
https://reactnative.dev/docs/images
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