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;
}

}

和我的反应成分

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;
}

反应不加载背景图片

1 个答案: