Как добавить фоновое изображение из локальной папки в контейнер

Question

Я хочу установить фоновое изображение контейнера div из изображения из локальной папки. Кто-нибудь знает, что мне нужно добавить в мой код / ​​как отредактировать его, чтобы сделать это? В настоящее время изображение не отображается по какой-то причине.

class Team extends React.Component{


    render(){

        let style = {
            backgroundRepeat: 'no-repeat',
            backgroundImage:'url("../images/Football_Field.png")',
            backgroundSize: '100% 100%',
            backgroundPosition: 'center',
            width: '100%',
            height: '100%',
            border: '2px dashed #333'
        }

        return (
            <div className="container" style={style}>

                <i className="fas fa-tshirt"></i>
            </div>
        )
    }
}

export default Team

Изображение находится в папке 'image' внутри папки src. (/src/images/Football_Field.png)

Путь к файлу Team компонентов - '/src/components/Team'.

Кто-нибудь также знает, как это сделать, если я вместо этогоИспользовали UI контейнер класса?

Answer 1

Может быть, это поможет -> https://create -react-app.dev / docs / using-the-public-folder /

Все, что вам нужно, это статическая папка для обслуживания ресурсови, если вы использовали приложение create-реакции-приложение, вам просто нужно поместить свои изображения в общую папку и следовать приведенному выше документу.

Answer 2

Вам нужно будет добавить изображения в общую папку, а затем назначить путь к backgroundImage.

Answer 3

В зависимости от конфигурации вашего веб-пакета, вы можете сделать что-то вроде этого:

import backgroundImage from "../images/Football_Field.png";

class Team extends React.Component{
    render(){

        let style = {
            backgroundRepeat: 'no-repeat',
            backgroundImage:'url(' + backgroundImage + ')',
            backgroundSize: '100% 100%',
            backgroundPosition: 'center',
            width: '100%',
            height: '100%',
            border: '2px dashed #333'
        }

        return (
            <div className="container" style={style}>

                <i className="fas fa-tshirt"></i>
            </div>
        )
    }
}

export default Team

В противном случае добавьте ваше изображение в общую папку и измените URL соответствующим образом.

Answer 4

Вы можете сделать что-то подобное в вашем методе рендеринга :) Знайте, что путь укореняется в общей папке после компиляции

     render()
    {
        const image = './images/tasse_kandinsky.webp';
        return(
            <div className='product'>
      
                <div className='product-image' style={{backgroundImage: 'url('+image+')'}}>
                    
                </div>
            </div>
        )
    }