Блог

Я пытаюсь загрузить полноэкранное фоновое изображение на целевой странице, но, похоже, я не могу загрузить изображение, когда ссылаюсь на него в 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;
}

}
  

и мой компонент react

 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;
  

Все, что отображается, — это кнопка «Начать», а не изображение

Я предполагаю, что вы используете 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;
}