无法通过react组件设置背景图像，出现错误
提问于 2020-11-29 13:08:31
我在公共文件夹中有我的背景图片'Sunny.jpg‘。我已经写了下面的代码，当最终用户进入位置纽约并按Enter键时，将'Sunny.jpg‘设置为背景图像，但在按enter键后，背景更改为图像'Sunny.jpg’，紧接着出现错误
编写的代码-
const WeatherStatus = (props) => {
// Types of weather status "Clear","Clouds","Rain","Thunderstorm","Snow","Mist","Haze"
return (
<div>
<Grid container justify="center">
<Paper elevation={10}
style={{ height:"auto", width:"45%", marginTop:"10%", padding:"3%", opacity:"75%" }} >
{props.status !== "Status" ? (
<Typography
style={{ fontSize:25 }}
align="center"
spacing="justify"
>{
(props.status === "Clear" && props.time < 19) ?
(<WiDaySunny className=".wb-font-style" size={35}/>)
(document.body.style.backgroundImage = "url('Sunny.jpg')")
: (props.status === "Clear" && props.time >= 19 && props.time < 4) ?
(<WiMoonAltNew className=".wb-font-style" size={35} />)
: (props.status === "Clouds") ?
(<WiCloudy className=".wb-font-style" size={35} />)
: (props.status === "Rain") ?
(<WiRainWind className=".wb-font-style" size={35} />)
: (props.status === "Thunderstorm") ?
(<WiThunderstorm className=".wb-font-style" size={35} />)
: (props.status === "Snow") ?
(<WiSnowflakeCold className=".wb-font-style" size={35} />)
: (props.status === "Mist" || props.status === "Haze") ?
(<WiDayHaze className=".wb-font-style" size={35} />)
: ('')
}{props.status}</Typography>
) : (
<Typography
style={{ fontSize:25 }}
align="center"
spacing="justify"
>Status</Typography>
)}
</Paper>
</Grid>
</div>
)
}
回答 2
Stack Overflow用户
发布于 2020-11-29 13:26:42
在src中创建一个图像文件夹，并将您的图像放在其中...
└── src
├── App.css
├── App.js
├── App.test.js
├── images
│ └── bg.jpg
├── index.css
├── index.js
├── logo.svg
├── reportWebVitals.js
└── setupTests.js在index.css中使用如下所示：
body {
background-image: url('./images/bg.jpg');
}Stack Overflow用户
发布于 2020-11-29 13:28:52
您需要图片位于src文件夹中
import SunnyImg from 'src/img/Sunny.jpg'; // your image path
...
(document.body.style.backgroundImage = "url(`${SunnyImg }`)")
...您还可以使用动态导入
const bgImg = reqire(`../img/${weather}.jpg`)多变的天气可以是：“晴天”、“下雨”等。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65060416
复制相关文章
点击加载更多
腾讯云开发者
