CODEWITHSUNDEEP
cssreactjs
RoshiDil
RoshiDil

Reputation: 477

How do I display an image with CSS in ReactJS?

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

Upvotes: 2

Views: 6492

Answers (3)

kiranvj
kiranvj

Reputation: 34107

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

Upvotes: 3

Alex Yepes
Alex Yepes

Reputation: 1195

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.

Upvotes: 1

nishkaush
nishkaush

Reputation: 1548

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?

Upvotes: 1

Related Questions