UPDATE: After trying different paths for my image import (such as 'import Github from '../..img/github.png'), the errors have disappeared but the image still won't load on my app.
Folder Structure: My-Portfolio node_modules public src components Intro Intro.jsx Intro.css NavBar NavBar.jsx NavBar.css img App.css App.js index.css index.js
Hey everyone, please bear with me. I'm new to this and I know this question has been asked multiple times. I've spent an hour searching and experimenting before turning to this forum for help.
So I have a file called Intro.jsx and I'm attempting to include the GitHub logo which is located in a folder named 'img' inside my 'src' folder but outside my 'components' folder.
I've attempted moving the img folder to different locations but I keep encountering the same error.
Here are the different import paths I've tried:
import Github from '../../img/github.png'
import Github from '../img/github.png'
import Github from './img/github.png'
import Github from '../src/img/github.png'
I've also tried other variations. But I just can't seem to get it to load. The error message remains consistent each time.
const Intro = () => {
return (
<div className="intro">
<div className="i-left">
<div className="i-name">
<span>I am </span>
<span>Josh!</span>
<span>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex,
doloribus? Explicabo, itaque? Sit adipisci odio mollitia veritatis
hic laudantium quisquam itaque ad
</span>
</div>
<button className="i-button button">Hire Me</button>
<div className="i-icons">
<img src="{Github}" alt="" />
<img src="{LinkedIn}" alt="" />
<img src="{Instagram}" alt="" />
</div>
</div>
<div className="i-right">I am right side</div>
</div>
);
};
Current Error:
ERROR in ./src/components/Intro/Intro.jsx 6:0-39
Module not found: Error: Can't resolve '../img/github.png' in '/Users/josh/Desktop/my-portfolio/src/components/Intro'
How can I resolve this issue? What am I missing? Thank you for your understanding and assistance!
I wanted to upload an image but couldn't due to being new here.