时间戳

首页 > 解决方案 > 无法在 ReactJS 中加载本地背景图像

javascript - 无法在 ReactJS 中加载本地背景图像

问题描述

我在使用我的 React 应用程序从本地机器获取图像时遇到了一些问题。

我正在尝试拍摄像

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

但它不起作用，我不明白为什么。

我的文件位于

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

我的图像在

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

这就是我index.js现在的样子（没有进口）：

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;

标签： javascriptreactjsbackground-image

解决方案

绝对路径和相对路径始终是开发人员要修复的问题之一：P 所以有另一种方法可以轻松解决这个问题。

你可以使用这样的东西：

在命名空间中导入任何图像

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

然后像这样使用它的元素

 <img src={backgroundImg} />

让我知道这个是否奏效。

推荐阅读