Can't load a local background image in ReactJS

user_12981314 0
Viewed 6306

I'm having some problems taking an image from my local machine with my React App.

I'm trying to take image like

style={{ backgroundImage: `url(../../assets/images/games/${img}))`  }}

But it's not working, and I don't understand why.

My file is located in

C:\Users\Me\Desktop\myreactapp\src\routes\GameSlider\index.js

And my images are in

 C:\Users\Me\Desktop\myreactapp\src\assets\images\games

This is how my index.js looks now (without imports):

const GameSlider = ( { key, id,  name, img, minPrice, maxSlots } ) => {
    return (
        <div key={key}>
            <div className="home-games">
                <div className="img" style={{ backgroundImage: `url(../../assets/images/games/${img}))`  }} alt="..." />
                <div className="price">
                    <IntlMessages id="gameSlider.startingAt" />
                    <p>
                        <span className="min">{minPrice}</span> 
                        <span className="per-slot">
                            <IntlMessages id="gameSlider.perSlot" />
                        </span>
                    </p>
                </div>
                <span className="title">{name}</span>
                <div className="features">
                    <Col span={24} className="feature">
                        <Icon type="lock" /> <IntlMessages id="gameSlider.upTo" /> {maxSlots} <IntlMessages id="general.slots" />
                    </Col>
                </div>
                <Link to={`/order/${id}`}><Button className="comet-buy-button" style={{ background: 'rgb(241,89,89)', borderRadius: '20px' }}>BUY NOW!</Button></Link>
            </div>
        </div> 
    );
}

export default GameSlider;
reactjs background-image javascript
4 Answers

1 - Import your img:

import img from '../../pics/asteroids.jpg'

2 - And then use it:

<div style={{backgroundImage: `url(${img})`}}>Test</div>

On your page this div will look like this:

<div style="background-image: url(&quot;/static/media/asteroids.c8ab11b3.jpg&quot;);">Test</div>
user_85089070

Absolute path and relative path is always one of the issue for developers to fix :P so there is a another way to solve this easily.

You can use something like this:

import the whatever image in the namespace

import backgroundImg from '../images/BackgroundImage.jpg';

then use it the element like this

 <img src={backgroundImg} />

let me know if this works.

user_35643590

If you want to use image or images without importing them, you should put your assets folder into the public folder and use them like below:

src='/assets/images/pic.jpeg'
user_86964800

I tried for hours lots of different solutions and in the end it came down to having quotes inside the url call, like this:

    `url('${ImportedImage}')`

Quite weird that this happened though because in previous projects it has always worked fine without the inner quotes (actually, I've noticed in the past that it worked with OR without the quotes). Only thing I've done differently this time is used the TypeScript template of create-react-app to set up the project.

user_142661890
Related