CODEWITHSUNDEEP
javascriptreactjsbackground-image
Feruumomaster
Feruumomaster

Reputation: 73

Can't load a local background image in ReactJS

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;

Upvotes: 5

Views: 13561

Answers (4)

nihilok
nihilok

Reputation: 2033

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.

Upvotes: 0

M.A
M.A

Reputation: 9

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'

Upvotes: 1

Pedro Henrique
Pedro Henrique

Reputation: 127

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>

Upvotes: 8

Manjuboyz
Manjuboyz

Reputation: 7066

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.

Upvotes: 3

Related Questions