Imported image not showing in React

Question

I've got a component on which I need to show an image:

import React from 'react'
import background from '../media/content-background.jpg'

function ContentPage(){
    return(
        <div id="content-page">
            <div id="content-header">
                <img href={background} alt='back'/>
            </div>
            <div id="content-body">

            </div>
        </div>
    )
}

export default ContentPage

The image is generated correctly as when I go to the url as specified in the inspector, it shows up in the browser.

But on the webpage only the alt is shown:

zjb · Accepted Answer · 2020-07-11 09:57:45Z

2

You should use src="" instead of href="".

href is used for specifying where you want a link to go, such as in an tag.

answered Jul 11, 2020 at 9:57

zjb

4001 silver badge7 bronze badges

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

Comments

Emanuele Scarabattoli · Accepted Answer · 2020-07-11 09:58:10Z

1

The problem is that you are using the wrong attribute in your img tag, use src instead:

<img src={background} alt='back'/>

answered Jul 11, 2020 at 9:58

Emanuele Scarabattoli

4,4601 gold badge14 silver badges26 bronze badges

Comments

Jaskaran Singh · Accepted Answer · 2020-07-11 09:59:13Z

1

Change href to src. href is used for anchor tags and src is used for img tags

answered Jul 11, 2020 at 9:59

Jaskaran Singh

657 bronze badges

Collectives™ on Stack Overflow

Imported image not showing in React

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related