gpt4 book ai didi

reactjs - react 不加载背景图像

转载 作者:行者123 更新时间:2023-12-03 12:24:28 25 4
gpt4 key购买 nike

我正在尝试在登录页面上加载全屏背景图像,但是当我在 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;

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

最佳答案

我假设您正在使用 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;
}

关于reactjs - react 不加载背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55512177/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com