I'm running into an issue with the img tag within a React application.
Here is how my file structure is set up:
Project
|
+-- assets
| |
| \-- pic.png
|
+-- views
| |
| |-- Home
| |
| |-- index.js
| \-- index.css
In views/Home/index.js, I have an <img> tag
The specific line of code I'm using is:
<img src="../../assets/pic.png" alt="pic"/>However, it's giving me an error saying that it cannot find the file. Strangely enough, if I replace the <img> tag with a <div> and use CSS to reference the image in views/Home/index.css:
.pic-container {
background-image: url("../../assets/pic.png");
}
<div className="pic-container"/>
It works without any issues.
Can anyone shed light on what might be causing this discrepancy?