CODEWITHSUNDEEP
htmlcssnode.jsreactjswebpack
user5939597
user5939597

Reputation:

Imported image not showing in React

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.

enter image description here

But on the webpage only the alt is shown:

enter image description here

Upvotes: 1

Views: 79

Answers (3)

Jaskaran Singh
Jaskaran Singh

Reputation: 65

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

Upvotes: 1

Emanuele Scarabattoli
Emanuele Scarabattoli

Reputation: 4489

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

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

Upvotes: 1

zjb
zjb

Reputation: 400

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

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

Upvotes: 2

Related Questions