无法通过react组件设置背景图像，出现错误
无法通过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
复制相关文章
点击加载更多
相似问题
用包含实例索引的变量替换字符串的每个实例。
Prolog用变量替换列表中常量的每个实例
用变量替换实例
用regex替换变量替换Python字符串
替换Python字符串中每个字符的实例
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
