如何根据天气情况(容器类)覆盖css中的背景图像。我正在使用wunderground API。我已检索到天气状况并存储在天气变量中。
问题是我如何根据天气动态改变背景。
谢谢!
displayalerts(){
let weather = this.state.cond;
let alerts;
if (weather === "Snow")
{
alerts = ["check tyre tread and pressure", "maintain safe stopping distances", "steer gently into skids"];
}
else if (weather === "Rain")
{
alerts = ["steer gently into skids"];
}
else if (weather === "Mostly Cloudy")
{
alerts = ["maintain safe stopping distances", "turn on fog lights"];
}
else if (weather === "Overcast")
{
alerts = ["check lights", "turn on fog lights"];
}
else if (weather === "Haze")
{
alerts = ["turn on fog lights"];
}
else if (weather === "Partly Cloudy")
{
alerts = ["check lights"];
}
else if (weather === "Sunny" || weather === "Clear")
{
alerts = ["Use the air conditioning"];
}
else {
alerts = ["No alerts available"];
}

.container {
width: 414px;
display: flex;
flex-direction: column;
background-image: url('http://bestanimations.com/Nature/winter/winter-snow-nature-animated-gif-23.gif');
background-attachment: fixed;
background-size:cover;
color: #fff;
margin: 0 auto;
font-family: acumin-pro-condensed, sans-serif;
font-style: normal;
font-weight: 100;
}

答案 0 :(得分:2)
您可以使用内联样式
const weatherToImage = {
"hot" : "data:image/jpeg;base64,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",
"cold" : "https://www.popsci.com/sites/popsci.com/files/styles/1000_1x_/public/images/2018/01/snow.jpg?itok=XvQRJE7b&fc=50,50",
"rain" : "http://bestanimations.com/Nature/winter/winter-snow-nature-animated-gif-23.gif"
}
class App extends React.Component {
state = {
image : 'http://bestanimations.com/Nature/winter/winter-snow-nature-animated-gif-23.gif'
}
handleClick = (e) => {
const { name } = e.target;
// FAKING API
const image = weatherToImage[name];
this.setState({
image
})
}
render () {
const { image } = this.state;
return (
<div
className='full-height'
style={{
backgroundImage: `url('${image}')`
}}>
<button onClick={this.handleClick} name="hot">Hot</button>
<button onClick={this.handleClick} name="cold">Cold</button>
<button onClick={this.handleClick} name="rain">Rain</button>
</div>
)
}
}
ReactDOM.render(<App/>, document.querySelector('#root'));
工作demo
答案 1 :(得分:0)
这样的东西?
document.querySelector(".container").style.backgroundImage = 'url(http://..'+weather+'.gif)';
显然,网址只是使用weather
变量的一个示例。
答案 2 :(得分:0)
您可以从css中删除background-image道具并添加到每个
document.querySelector(".container").style.backgroundImage = "url('http://bestanimations.com/Nature/winter/winter-snow-nature-animated-gif-23.gif')";
使用weather
但我认为这是硬编码的方式......