How do I display an image with CSS in ReactJS?

Question

I tried with the following code after importing the image to the src folder. But I can't see the image getting displayed. How to solve this issue?

My React code is this.

import React from 'react'
import burgerLogo from '../../assets/images/burger-logo.png'
import classes from './Logo.module.css'

const logo=(props)=>(
    <div className={classes.Logo} style={{height:props.height}}>
        <image src={burgerLogo} alt="MyBurger"/>
    </div>

);

export default logo;

My CSS code is this.

.Logo{
    background-color: white;
    padding: 8px;
    height: 100%;
    box-sizing: border-box;
    border-radius: 5px;
}

.Logo img{
    height: 100%;
}

Try instead of using a variable using the path in the image source. I don't think that you need to import the image like that. — Ale Plo
– Ale Plo, Commented Oct 18, 2020 at 2:37

kiranvj · Accepted Answer · 2020-10-18 03:01:45Z

3

Can you change the tag image to img

    <image src={burgerLogo} alt="MyBurger"/>

to

    <img src={burgerLogo} alt="MyBurger"/>

if the import import burgerLogo from '../../assets/images/burger-logo.png' is not correct, you will get an error, so that should not be a problem in your case.

Just want to point that user defined components should start with a capital letter.

When an element type starts with a lowercase letter, it refers to a built-in component like or and results in a string 'div' or 'span' passed to React.createElement. Types that start with a capital letter like compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file.

We recommend naming components with a capital letter. If you do have a component that starts with a lowercase letter, assign it to a capitalized variable before using it in JSX.

from the ReactJS docs

Coming back to your question

How do I display an image with CSS in ReactJS?

You can do that using CSS background-image property.

Put your image burger-logo.png in public folder (you can change location if needed eg: inside img or assets folder).

In you CSS use like this

.Logo {
    background-color: white;
    background-image: url('./burger-logo.png');
    padding: 8px;
    height: 100%;
    box-sizing: border-box;
    border-radius: 5px;
}

edited Oct 18, 2020 at 3:01

answered Oct 18, 2020 at 2:48

kiranvj

34.2k8 gold badges75 silver badges81 bronze badges

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

2 Comments

khmub Over a year ago

Hi, @kiranvj have you verified with this css approach you are also able to CTRL+P. In my case. I have a logo on React Dialog, when user wants to make print. The logo doesn't show in print preview niether print. Any idea ?

kiranvj Over a year ago

@khmub try adding -webkit-print-color-adjust: exact; in the css class. Check MDN for more details

nishkaush · Accepted Answer · 2020-10-18 02:41:43Z

1

Depending on your React setup, the src for image can vary.

Can you try changing the location of your image file like so:

import burgerLogo from './burger-logo.png'

If Webpack is setup to look into a certain folder for .png files, it will automatically pick it up from that folder and attach the correct file location behind the scenes.

PS. Do you see any errors in the console?

answered Oct 18, 2020 at 2:41

nishkaush

1,5481 gold badge14 silver badges22 bronze badges

1 Comment

RoshiDil Over a year ago

No console erros. It worked by replacing <image> tag with <img> tag. Thank You

Alex Yepes · Accepted Answer · 2020-10-18 02:59:09Z

1

Assuming your assets folder is inside your public folder do it like this : <img src='./assets/images/burger-logo.png' alt="MyBurger"/> If it doesn't work, try this <img src='./images/burger-logo.png' alt="MyBurger"/> It really depends on the path of the image.

edited Oct 18, 2020 at 2:59

answered Oct 18, 2020 at 2:37

Alex Yepes

1,2051 gold badge11 silver badges23 bronze badges

Collectives™ on Stack Overflow

How do I display an image with CSS in ReactJS?

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related