0

I'm new to react, I'm trying to display images from the src/images folder. but after inserting the correct path, then also the image is not visible. Here you can see my img tag path and on the left side folder structure

Rahul
  • 11
  • 3
  • Does this answer your question? [React won't load local images](https://stackoverflow.com/questions/34582405/react-wont-load-local-images) – Vikas Apr 02 '21 at 11:50
  • did you made an import? like `import image from '../images/myimage.png'` ? – Romanas Apr 02 '21 at 12:19

1 Answers1

1

From the Image you provided, looks like you used require("path...") which is not a good way to do so, its valid tho, but not a good practice, its recommended and is common to use import X from "somewhere" syntax.

I suggest you to use either of these two ways to use images in react.

  1. put images in public folder and use relative links in the href tag, i.e:
<img href="/images/panda.png" alt="cute panda" />
  1. put images inside a folder somewhere inside src folder like you did in the image and import images using ES import syntax, and use imported image variable in {} expression for src prop, i.e:
import PandaImg from "../images/panda.png"

const Panda = ()=>{
  return <img src={PandaImg} alt="cute panda" />
}

Here is a CodeSandbox Example may help you further explore the code in broader context.

Akam
  • 131
  • 6