CODEWITHSUNDEEP
reactjs
Poshan Baral
Poshan Baral

Reputation: 45

How to access images from different folder in react?

I'm new in React JS and I want to import images in a src/views/Landingpage/index.js! These images are inside of the src/assert/image/ folder and I do not know how to access the images?

The structure folder is:

The structure folder is:

Upvotes: 0

Views: 2815

Answers (4)

juniorsenior
juniorsenior

Reputation: 66

Put your assets inside public directory for get access to your assets without import statement. For example, you can create folder Images inside public directory: 'public/Images' Then you can access to this using code below:

<img src="./Images/*ImageName*" alt="404"/>

Upvotes: 2

Srikanta Banerjee
Srikanta Banerjee

Reputation: 16

You can do this in two ways:

  1. You can import the image in the component where you want to use it by giving it's path:
import photo from 'assets/image/photo.jpeg';

And then use it in your image tag:

<image src={photo} alt="alt-text"/>
  1. You can have your assets inside the public folder and then pass the path like:
<image src={`${process.env.PUBLIC_URL}/assets/image/photo.png}` alt="alt-text"/>

Hope this helps.

Upvotes: 0

buzz
buzz

Reputation: 1106

You can import the images just like you would import a component.

for example, in your index.js

import imageName from "../../assets/image/imagename.jpg"

then in the src of image put the imageName

<img src={imageName}/>

Upvotes: 1

burrito
burrito

Reputation: 154

If i understand your question, try this: import imageName from '../../assets/image/imageName.jpg'

Upvotes: 0

Related Questions