Реагировать не загружая фоновое изображение

Question

Я пытаюсь получить полноэкранное фоновое изображение для загрузки на целевой странице, но я не могу загрузить изображение при ссылке на него в CSS

Я могу ссылаться на него из моего компонента React, используя <img src={require('../assets/img/header.jpg')} />, и он загружается правильно, но если я загружаю его в файл CSS, он не работает

Мой файл CSS выглядит следующим образом

body, html {
    overflow-y: hidden;
    height: 100%;
}

.bg {
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url("../img/header.jpg");
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

}

и мой компонент реакции

import React, { Component } from 'react';
import '../assets/css/landing.css'

class Landing extends Component {
    render() {
        return (
            <div className="bg">
                <div className="center">
                    <a href="index.html" className="button is-info is-rounded is-centered is-medium">Get Started</a>
                </div>
            </div>
        );
    }
}

export default Landing;

Все, что отображается, это кнопка начала работы, а не изображение

Answer 1

Я предполагаю, что вы используете create-react-app или шаблон для React, который вытягивает image-loader. Всякий раз, когда вы делаете запрос, он загружает изображение как изображение данных или (если файл очень большой) как файл с путем к файлу, отличным от заданного вами (потому что React будет связывать и знать, куда именно поместить и ссылаться на изображение) .

Ссылка на него в CSS может быть не идеальным решением по причинам, указанным выше.

Вы всегда можете попробовать этот подход (настройка фонового изображения):

import React, { Component } from 'react';

// This is more of a recommendation, you can still use the require if you want to
import Image from '../../image';   

export default function() {
    return (
        <div className="to-change-background-of" style={{ backgroundImage: `url(${Image})`}} />
    );
}

Это должно потянуть изображение, используя причины, которые я указал выше, на этот раз устанавливая фоновое изображение.

Одна вещь (я не уверен почему) в этом заключается в том, что свойство background (когда вы используете CSS) имеет тенденцию ломаться в некоторых браузерах. Так в cSS

.to-change-background {
    background: #EEE no-repeat center;
}

Это может нарушить код. Возможно, вам придется сломать его (игнорируя линтинг)

.to-change-background {
    background-color: #EEE;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}