Cannot load images from my desktop on React

Question

enter image description hereI have a folder Images on my desktop with .jpg and .svg on my src file that I would like to add on a component but I cannot load them. I don't understand what I'm doing wrong. Can someone help?

import React from 'react';
import './Banner.css';








const Banner = () => {

 
 
        return (

            

            <div className="banner">
                     <img src="../Images/banner.bg.jpg" alt="banner" />
              
                <div className="text">
                    <img src='../Images/party-icon.svg' alt="party" />
             <h3>Let's The Fun Begin!</h3>
            <p>Thanks for your order, we'll have it with you as soon as possible.<br></br>
               Your order number is #10293838 and a confirmation email has been sent to the address provided.</p>

            <p>Order Even Faster in Future</p>
            

            
            <button className="button">CREATE AN ACCOUNT</button>

         
           
            </div>

            
           
            </div>
          
        );
    
}

export default Banner;

try importing the folder inside your project, probably the relative path of the images is not what you are expecting — aaandri98, Sep 10 '21 at 07:49
If your file is x/y/z/index.html then your browser security settings might not allow it to load images like x/y/image.jpeg. Try organizing things so x/y/z/index.html is above your images, like x/y/z/images/pic.jpeg. — Sean Morris, Sep 10 '21 at 07:53
Can you show the screenshot of your current project tree? Maybe the path is wrong and you are too tried to realised it :D — , Sep 10 '21 at 07:55
Are you using create-react-app or you wrote the webpack configuration on your own? — , Sep 10 '21 at 07:55
Yes I'm using create-react-app. I've added a screenshot of the project tree if that can help — Elsa, Sep 10 '21 at 08:09

score 0 · Answer 1 · answered Sep 10 '21 at 07:57

0

1 - Your images should sit inside your project source (usually in a 'assets'/'images') folder.

2 - Make sure that the source path in <img src='../Images/party-icon.svg' alt="party" /> is relative to the current file and points to the party-icon.svg sitting in your assets folder.

answered Sep 10 '21 at 07:57

Claudio

92
2
11

yes I put them inside the project source in an Images folder – Elsa Sep 10 '21 at 08:10

score 0 · Answer 2 · answered Sep 10 '21 at 08:16

0

You may import the pic on top like this:

import bg from '../Images/banner.bg.jpg'

then add your pic like this:

<img src={bg} alt="banner" />

you can do the same thing for other pics. Instead of bg you can write anything you want. Choosing appropriate names for different pictures can be better.

Good luck :)

answered Sep 10 '21 at 08:16

codingMaz

1
2

that's not working either, when I do this now it says Module not found: Can't resolve '../Images/banner.bg.jpg' in '/Users/cihemzine/Fisheye/client/src/components' – Elsa Sep 10 '21 at 08:20

score 0 · Accepted Answer · answered Sep 10 '21 at 08:32

You can import those separate images & use it on src, or you can use require.

If you place your Images directory inside public folder then you can access your images directly like this

 src="/Images/banner.bg.jpg"

Check the answers of this question (Correct path for img on React.js), I think that may help you to understand those solutions better.

Cannot load images from my desktop on React

3 Answers3