0

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.

Fuaad
  • 197
  • 15
  • 1
    Does this answer your question? [ReactJS and images in public folder](https://stackoverflow.com/questions/47196800/reactjs-and-images-in-public-folder) – Kaneki21 Feb 11 '23 at 12:39
  • Does this answer your question? [Images not loading when relative path is used in React](https://stackoverflow.com/questions/72606910/images-not-loading-when-relative-path-is-used-in-react) – Youssouf Oumar Feb 11 '23 at 16:01

1 Answers1

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.

Wesley LeMahieu
  • 2,296
  • 1
  • 12
  • 8
  • 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? – Fuaad Feb 11 '23 at 15:55
  • 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. – Wesley LeMahieu Feb 11 '23 at 16:10
  • 1
    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? – Fuaad Feb 11 '23 at 16:19
  • No problem it can be very confusing. I've revising my answer and including an example sandbox which may help. – Wesley LeMahieu Feb 11 '23 at 16:53