Correct Path for Img on React.Js

Correct path for img on React.js

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" />


React - Correct path to display image

It depends. If you're using a resources bundler (such as Webpack), you can require it directly and the path will be set for you:

<img src={require('./image.png')} />

Note that you'll need to have an image loader enabled (file-loader for webpack).

Otherwise, the path needs to be relative to where your output javascript file is on your server. Eg, if your main.js is at /, you'll need to have the paths relative to the root of your server.

How do I reference a local image in React?

First of all wrap the src in {}

Then if using Webpack;
Instead of:
<img src={"./logo.jpeg"} />

You may need to use require:

<img src={require('./logo.jpeg')} />

---

Another option would be to first import the image as such:

import logo from './logo.jpeg'; // with import

or ...

const logo = require('./logo.jpeg); // with require

then plug it in...

<img src={logo} />

I'd recommend this option especially if you're reusing the image source.

React Image path is correct but it doesn't find/import it

I have an exotic solution, It's happening very rarely but it might happen to you, Change the name to numbers like 123.jpg
It might happen that the letter a is in Russian and English or something like that, just try

How to create relative path in React so images appear

<img className="medium" src={`/${product.image}`} alt={product.name}/>

---

Related Topics