CODEWITHSUNDEEP
javascriptreactjswebpack
onedkr
onedkr

Reputation: 3386

Correct path for img on React.js

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.

Upvotes: 235

Views: 661312

Answers (14)

Mustkeem K
Mustkeem K

Reputation: 8838

  1. Make an images folder inside src(/src/images) And keep your images there. Then import an image in your component(use relative path). Like below-

    import imageSrc from './images/image-name.jpg';

    And then in your component.

    <img title="my-img" src={imageSrc} alt="my-img" />

  2. Another way is to keep images in public folder and import them using relative path. For this make an images folder inside public folder and keep your images there. And then in your component use it like below.

    <img title="my-img" src='/images/my-image.jpg' alt="my-img" />

    Both methods work fine but first one is recommended because its cleaner way and images are handled by webpack during build time.

Upvotes: 42

Nicolas Bodin
Nicolas Bodin

Reputation: 1591

I create my app with create-react-app and I use require instruction if I want to change dynamically my image src:

export const MyComponent = () => {
  const [myImg, setMyImg] = useState(require('./path/to/my/img'));

  const handleClick = () => {
    setMyImg(require('./path/to/other/img'));
  }

  return (
    <div>
      <img src={myImg} alt='myImg' />
      <button onClick={handleClick}>Click me!<button/>
    <div>
  )
}

Upvotes: 0

Hrishikesh Baidya
Hrishikesh Baidya

Reputation: 567

I have used it this way and it worked perfectly

import Product from "../../images/product-icon.png";
import { Icon } from "@material-ui/core";

<Icon>
    <img src={Product} style={{ width: "21px", height: "24px" }} />
</Icon>

Upvotes: 10

Muzaffer
Muzaffer

Reputation: 137

If your page url contains multiple / then in src go back / count minus 1 times.

For example page url http://localhost:3000/play/game/ then src url must be ../your-image-folder/image-name. And your your-image-folder must be in public folder.

Upvotes: 1

Prince Sodhi
Prince Sodhi

Reputation: 2955

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

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

Upvotes: 48

claireablani
claireablani

Reputation: 8204

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

Upvotes: 479

iamtheasad
iamtheasad

Reputation: 1127

Import Images in your component

import RecentProjectImage_3 from '../../asset/image/recent-projects/latest_news_3.jpg'

And call the image name on image src={RecentProjectImage_3} as a object

 <Img src={RecentProjectImage_3} alt="" />

Upvotes: 3

Manohar Reddy Poreddy
Manohar Reddy Poreddy

Reputation: 27495

Some older answers din't work, others are good but won't explain the theme, in summary:

If image is in 'public' directory

Example: \public\charts\a.png

In html:

<img id="imglogo" src="/charts/logo.svg" />

In JavaScript:

Create image to new img, dynamically: 

var img1 = document.createElement("img");  
img1.src = 'charts/a.png';

Set image to existing img with id as 'img1', dynamically: 

document.getElementById('img1').src = 'charts/a.png';

If image is in 'src' directory:

Example: \src\logo.svg

In JavaScript: 

import logo from './logo.svg';  
img1.src = logo;

In jsx:

<img src={logo} />

Upvotes: 21

Sami Start
Sami Start

Reputation: 2025

Place the logo in your public folder under e.g. public/img/logo.png and then refer to the public folder as %PUBLIC_URL%:

<img src="%PUBLIC_URL%/img/logo.png"/>

The use of %PUBLIC_URL% in the above will be replaced with the URL of the public folder during the build. Only files inside the public folder can be referenced from the HTML.

Unlike "/img/logo.png" or "logo.png", "%PUBLIC_URL%/img/logo.png" will work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running npm run build.

Upvotes: 1

Rubel hasan
Rubel hasan

Reputation: 2618

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

Upvotes: 233

Treefish Zhang
Treefish Zhang

Reputation: 1161

Adding file-loader npm to webpack.config.js per its official usage instruction like so:

config.module.rules.push(
    {
        test: /\.(png|jpg|gif)$/,
        use: [
            {
                loader: 'file-loader',
                options: {}
            }
        ]
    }
);

worked for me.

Upvotes: 5

Dima G
Dima G

Reputation: 2025

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'} />

Upvotes: 76

AdamJSim
AdamJSim

Reputation: 123

A friend showed me how to do this as follows:

"./" works when the file requesting the image (e.g., "example.js") is on the same level within the folder tree structure as the folder "images".

Upvotes: 2

prekolna
prekolna

Reputation: 1578

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

Upvotes: 100

Related Questions