Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Where to put images in a react-native project?

Tags:

react-native

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?

enter image description here

like image 575
Assem Avatar asked Aug 11 '16 04:08

Assem


People also ask

Where should I store images in react project?

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.

How do I display images in react native?

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.

Where do I add images to react app?

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.


2 Answers

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.

like image 80
Nidhi Patel Avatar answered Oct 28 '22 05:10

Nidhi Patel


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

like image 35
Aneesh P V Avatar answered Oct 28 '22 04:10

Aneesh P V