reactjs - react 不加载背景图像

Question

我正在尝试在登录页面上加载全屏背景图像，但是当我在 CSS 中引用它时似乎无法加载图像

我可以使用 <img src={require('../assets/img/header.jpg')} /> 从我的 React 组件中引用它它加载正确，但如果我将它加载到 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;

显示的只是开始按钮，而不是图像

Answer 1

我假设您正在使用 create-react-app或引入 image-loader 的 React 样板文件.每当您执行要求时，它会将图像加载为数据图像或(如果文件非常大)作为文件路径与您设置的文件路径不同的文件(因为 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;
}