Не могу загрузить локальное фоновое изображение в ReactJS - PullRequest
Новая
       7

Не могу загрузить локальное фоновое изображение в ReactJS

0 голосов
/ 29 февраля 2020

У меня возникают некоторые проблемы при получении изображения с моего локального компьютера с помощью приложения 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;

1 Ответ

0 голосов
/ 29 февраля 2020

Абсолютный путь и относительный путь всегда является одной из проблем, которую разработчики могут исправить: P, так что есть другой способ решить эту проблему легко.

Вы можно использовать что-то вроде этого:

импортировать любое изображение в пространство имен 

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

, затем использовать его как этот элемент 

 <img src={backgroundImg} />

, дайте мне знать, если это работает .

...