How do I display an image with CSS in ReactJS?

user_12208032 0
Viewed 2741

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?

enter image description here

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%;
}
reactjs css
3 Answers

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;
}
user_11883220

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.

user_103394630

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?

user_73520200
Related