Correct path for img on React.js

Question

I have some problem with my images on my react project. Indeed I always thought that relative path into src attribute was built on the files architecture

Here my files architecture:

components
    file1.jsx
    file2.jsx
    file3.jsx
container
img
js 
... 

However I realized that the path is built on the url. In one of my component (for example into file1.jsx) I have this:

localhost/details/2
<img src="../img/myImage.png" /> -> works

localhost/details/2/id
<img src="../img/myImage.png" /> -> doesn't work, images are not displayed

How is it possible to solve this problem? I want that in any form of routes handled by react-router, all images can be displayed with the same path.

Solution 1

You're using a relative url, which is relative to the current url, not the file system. You could resolve this by using absolute urls

<img src ="http://localhost:3000/details/img/myImage.png" />

But that's not great for when you deploy to www.my-domain.bike, or any other site. Better would be to use a url relative to the root directory of the site

<img src="/details/img/myImage.png" />

Solution 2

In create-react-app relative paths for images don't seem to work. Instead, you can import an image:

import logo from './logo.png' // relative path to image 

class Nav extends Component { 
    render() { 
        return ( 
            <img src={logo} alt={"logo"}/> 
        )  
    }
}

Solution 3

If you used create-react-app to create your project then your public folder is accessible. So you need to add your image folder inside the public folder.

public/images/

<img src="/images/logo.png" />

Solution 4

With create-react-app there is public folder (with index.html...). If you place your "myImage.png" there, say under img sub-folder, then you can access them through:

<img src={window.location.origin + '/img/myImage.png'} />

Solution 5

If the image is placed inside the 'src' folder, use the following:

<img src={require('../logo.png')} alt="logo" className="brand-logo"/>

View more solutions

Comments

[omarjmh]

just point directly to the image, dont use ../ whatever

[today]

You need to use require. Read this answer on SO for more info.

[Mokesh S]

Hope this answer helps you out React local images

[user1322092]

Thanks, I would emphasize the / that precedes details (vs ./details, etc, for others who may conflate the two).

[zok]

what about dynamic images, for instance, referenced in a json file, in create-react-app?

[claireablani]

@zok I think you would export the variable from the JSON file, import the variable into your component. Then you can reference it as usual. e.g. export const my_src = variable_here, import {my_src} from my_file, and src={my_src}.

[Hitendra]

import './styles/style.less'; **import logo from './styles/images/deadline.png';** I am getting error on 2nd line module not found while image exists & path is correct.

[Andre]

This method is also confirmed by by survive.js if you want to take a look at one of the core webpack author's methods. He also mentions you can use babel-plugin-transform-react-jsx-img-import to get around having to import the image every time you reference an image.

[Sami]

Not this, it solves only image issue but does not solve the path issue.. Dima Gershman' answer is the actual react solution for path of any file img or else

[Sami]

This should be marked as the correct answer, because it is actually reactjs solution for all types of paths of any files

[Jimit Patel]

Even for me it's not working. I am using reactjs with cordova and using ES5 as eslint

[Maderas]

I don't understand why you think this is the correct answer. I just tried this answer and Claireblani's answer and claire's answer worked while this did not. This answer only works if the image is in the public folder. Should my images go in the public folder? @Sami

[Sami]

Yes @Maderas first things is is this answer is same as the accepted one => just removing {} and base url you can use simply src='/relative path of image' or src='absolute path of image' Whats more in this answer is that it accommodates variable path for any image

[Raphael]

this helped me :)

[Athir Nuaimi]

While both this and claireablani's solution work, claireablani's is what the create-react-app docs recommend. They list a number of benefits over putting the resources in public facebook.github.io/create-react-app/docs/…

[Jeremy Rea]

This won't work, a slash ( / ) is required at the start to indicate relative path, like so: "/images/pitbull-mark.png"

[Mustkeem K]

have you tried the one mentioned in the answer? This should work too.

[Nuhman]

@user1322092 is right. Remember it's /images/popcorn.png and not ./images/popcorn.png. Worked for me with all the routes and stuff.

[Si8]

I was about to ask a question but THIS answer solved my issue!!! Should be marked as answer. Thanks!!! +1

[awasik]

It worked for me. Just remember that you need to restart the app if you added new image to the public directory.

[AndriyFM]

This is the best practice for me who used for dummy image which located in the same root folder

[Maria Campbell]

So far works for me like a charm. Nothing else did! And I tried just about everything. Thanks!

[Alexandru Pirvu]

It is indeed a fast way to treat the situations, but it will work only if you don't need relative URLs. E.g. if you serve your app at www.example.com/react-app, the public folder will be exposed on www.example.com, without react-app. This can be troublesome, so the accepted answer is the correct one. Sources: adding assets and using public folder

[Mr_LinDowsMac]

That worked for me. This works in the case you DON'T want to store images in public folder

[Piyush N]

In my case, Even json file is dynamic and logo can we fetched from either A or B file depends on condition. How can solve this case with your approach? FYI: I don't want to use multiple import because we have many client lets say 1000, in that case if we go with this approach we will end up using import statement 1000 times! for using logo conditionally.

[Soon Santos]

Check create-react-app/adding-images.. documentation for more.

[kojow7]

@JeremyRea A slash at the start indicates an absolute path, not a relative path.

[mercury]

the / will follow the component url, not work

[rainversion_3]

like @Dima mentioned below, if you used create-react-app then you can place the images in public->myImgFolder->myImg.png folder and use it as <img src="/myImgFolder/myImg.png" alt={"logo"}/>

[nimsrules]

For anyone facing [object Module] error in the img's src, do this src={require('../logo.png').default}

[Rohit Kumar Shrivastava]

This works for .csv files as well. A great help.