What is the right way to add path for <img> element in React JS?

Question

I'm using React Router for my React Project and I've been displaying my svg icons in the following way:

<img src="./icons/dashboard-sidebar-toggler.svg" className="mr-12"></img>

while the URL of the page was as:

<Route path="/appeal_edit_page" element={<Appeal_edit_page />} />

But when I try to make this path nested by adding:

<Route path="/dashboard/appeal_edit_page" element={<Appeal_edit_page />} />

then all my images being loaded previously get disappear but when I remove the first dot from image src, like following

<img src="/icons/dashboard-sidebar-toggler.svg" className="mr-12"></img>

then everything is fine. Can you please explain what's the trick behind this?

Note: I've an icons folder in my public folder from where I want to access my svg's.

Does this answer your question? ReactJS and images in public folder — Kaneki21
– Kaneki21, Commented Feb 11, 2023 at 12:39
Does this answer your question? Images not loading when relative path is used in React — Youssouf Oumar
– Youssouf Oumar, Commented Feb 11, 2023 at 16:01

Wesley LeMahieu · Accepted Answer · 2023-02-11 16:56:30Z

1

./ means relative to the current file.

/ means it's using the project-defined root path or baseUrl which is the src folder for react. So / from any component would start from the src folder.

../ goes up a directory from where the file is currently at and that likely would work here as well:

<img src="../icons/dashboard-sidebar-toggler.svg" className="mr-12"></img>

But I think the way you did it is cleaner:

<img src="/icons/dashboard-sidebar-toggler.svg" className="mr-12"></img>

Additionally, you can import images at the top of your react file as well and use the import as a source:

import sideBarTogglerSVG from '/icons/dashboard-sidebar-toggler.svg';

<img src={sideBarTogglerSVG} className="mr-12" />

EDIT

Here is a basic example of possible and not possible situations for importing images in a React app.

import React from "react";
import cat2 from "./assets/cat2.jpeg"; // <--- "relative" from `src`
import kitten from "./assets/kitten.jpg"; // <--- "relative" from `src`
// import checkSVG from "/assets/svgs/check.svg"; // <--- "relative" from `package.json`, won't work without module aliasing
// import checkSVG from "assets/svgs/check.svg"; // <--- treated as a `node_module` import, won't work
import checkSVG from "./assets/svgs/check.svg"; // <--- "relative" from `src`

export default function App() {
  return (
    <div>
      <img width="40" height="40" src={checkSVG} />
      {/* Looking inside /public */}
      <img alt="Blue eyed cat" src="/cat.jpg" />
      <img alt="Sleeping cat" src={cat2} />
      {/* Looking inside /public */}
      <img alt="Kitten Not Showing" src="./kitten.jpg" />
      <img alt="Kitten Showing" src={kitten} />
    </div>
  );
}

Here's a working sandbox to try out React image importing.

edited Feb 11, 2023 at 16:56

answered Feb 11, 2023 at 12:40

Wesley LeMahieu

2,6731 gold badge15 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Fuaad Over a year ago

What brings up the confusion for me is that if I use "src={image}" and then import "image" component with relative path to current file, it displays the image but when I add same path in "src" of img tag, then image isn't displayed... What's the deal here?

Wesley LeMahieu Over a year ago

When you do a relative image import in react it’s from the /public. My apologies, ../ wont work for react images. Revising the answer slightly.

Fuaad Over a year ago

Things are a bit messed up. Can you please clarify what does "src="./"" mean? As I found it working when route isn't nested and need to remove this dot to make it work with nested routes as well. Why does this happen, as routes have nothing to do with the file location?

Wesley LeMahieu Over a year ago

No problem it can be very confusing. I've revising my answer and including an example sandbox which may help.

Collectives™ on Stack Overflow

What is the right way to add path for <img> element in React JS?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related