How to add background image from local folder to a container

Question

I want to set the background image of a container div from an image from a local folder. Does anyone know what i need to add to my code/ how to edit it to do this? Currently the image isnt showing for some reason.


class Team extends React.Component{


    render(){

        let style = {
            backgroundRepeat: 'no-repeat',
            backgroundImage:'url("../images/Football_Field.png")',
            backgroundSize: '100% 100%',
            backgroundPosition: 'center',
            width: '100%',
            height: '100%',
            border: '2px dashed #333'
        }

        return (
            <div className="container" style={style}>

                <i className="fas fa-tshirt"></i>
            </div>
        )
    }
}

export default Team

The image is in a 'image' folder inside the src folder. (/src/images/Football_Field.png)

The Team components file path is '/src/components/Team'.

Would anyone also know how to do this if i instead used a ui container class?

score 0 · Answer 1 · answered Oct 19 '19 at 10:42

You could do something like it in your render method :) Do Know that the path is rooted at the public folder once it's compiled

     render()
    {
        const image = './images/tasse_kandinsky.webp';
        return(
            <div className='product'>
      
                <div className='product-image' style={{backgroundImage: 'url('+image+')'}}>
                    
                </div>
            </div>
        )
    }

score 0 · Answer 2 · answered Oct 19 '19 at 10:48

Depending on your webpack configuration, you could do something like this:

import backgroundImage from "../images/Football_Field.png";

class Team extends React.Component{
    render(){

        let style = {
            backgroundRepeat: 'no-repeat',
            backgroundImage:'url(' + backgroundImage + ')',
            backgroundSize: '100% 100%',
            backgroundPosition: 'center',
            width: '100%',
            height: '100%',
            border: '2px dashed #333'
        }

        return (
            <div className="container" style={style}>

                <i className="fas fa-tshirt"></i>
            </div>
        )
    }
}

export default Team

Otherwise add your image to your public folder and change the url accordingly.

why do you use the two + operators either side of `backgroundImage` inside url()? — Sean, Oct 19 '19 at 19:52
@Sean It is just a string concatenation. Some webpack configurations allow you to import an image in your js file. At build time the imported image will be copied in the build folder along with the rest and its value in the javascript files replaced by the relative path of the file. So in the above example, the variable `backgroundImage` will be set to a string with the image URL. — giuseppedeponte, Oct 21 '19 at 05:38

score 0 · Answer 3 · answered Oct 19 '19 at 14:08

0

Maybe this helps -> https://create-react-app.dev/docs/using-the-public-folder/

All you need is a static folder to serve assets, and if you used create-react-app, you just need to put your images in the public folder and follow the doc above.

answered Oct 19 '19 at 14:08

Rohith Balaji

848
7
21

How to add background image from local folder to a container

3 Answers3