React not loading image

Question

I'm new to react and I'm trying to make my component load an image. I have the following structure:

src/components/menu/myFile.js
src/images/logo.png

Here is myFile.js where I try to load the logo.png

const myFile = (props) => (
    <Aux>
        <header class="header_main">
            <section class="container">
                <section class="row">
                    <section class="col-xs-12 col-sm-6 col-md-6">
                        <figure class="logo"><a href="#"><img src="../../images/logo.png"  alt=""/></a></figure>
                    </section>
                    <section class="col-xs-12 col-sm-6 col-md-6">
                        <ul class="nav_main pull-right">
                            <li><a href="#">Help</a></li>
                            <li><a href="#">About</a></li>
                            <li><a href="#">Sign Up</a></li>
                            <li><a href="#">Log In</a></li>
                        </ul>
                    </section>
                </section>
            </section>
        </header>
    </Aux>
);

It is not loading the logo.png and when I check it in the browser using firebug, it says "Could not load the image"

This has nothing to do with react, your server is not hosting the image properly — mousetail
– mousetail, Commented Aug 28, 2020 at 18:51
do you use create-react-app? It is up to webpack to bundle assets. In most cases, you have to import image by relative path, to get the actual path after bundling: import logoPath from '../../images/logo.png' — Alexander Alexandrov
– Alexander Alexandrov, Commented Aug 28, 2020 at 18:53
Yes, I used npx create-react-app my-app. After importing the logoPath, how can I insert it in my img src? — myTest532 myTest532
– myTest532 myTest532, Commented Aug 28, 2020 at 18:59

Vibhav · Accepted Answer · 2020-08-28 19:11:33Z

1

import logo from "../../images/logo.png"

Inside image

<img src={logo} />

this will work

answered Aug 28, 2020 at 19:11

Vibhav

3211 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

myTest532 myTest532 Over a year ago

If I have multiple images, can I use import Images from "../../images" Then, src={Images.logo.png} ?

Vibhav Over a year ago

For people watching in future Yes of course! Like this const Images = { image1:"image_url1", image2:"image_url2" ... } on your comp import Images from "../path-of-that-const" <img src={Images.image1} />

Saurabh Nigam · Accepted Answer · 2020-08-28 19:09:21Z

1

First Import the image like:

import logo from '../../images/logo.png';

then plug it in like :

<img src={logo} />

answered Aug 28, 2020 at 19:09

Saurabh Nigam

8237 silver badges12 bronze badges

Collectives™ on Stack Overflow

React not loading image

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related