无法在 ReactJS 中加载本地背景图片

Question

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;

Answer 1

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.

Answer 2

如果你想使用一个或多个图像而不导入它们，你应该把你的资产文件夹放到公共文件夹中，然后像下面这样使用它们：

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

Answer 3

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>