React.js中如何设置div的background_image实现天气应用随城市切换背景

问题原因及解决方法 #

你遇到的不生效问题由以下几个常见原因导致，按优先级排查即可：

1. React行内样式属性名写法错误
   React行内样式的CSS属性必须使用小驼峰命名，background-image对应的正确写法是backgroundImage，你代码里写的background_image属于不符合规范的写法，浏览器无法识别。
2. 容器高度不足
   你绑定样式的div没有设置最小高度，只会随内部内容撑开高度，如果内容高度不足，背景图只会显示极小一部分甚至完全不可见。
3. 静态资源路径解析问题
   如果你的项目是用Create React App/Vite等脚手架搭建的，相对路径./assets/xxx.jpg在打包后可能出现解析失败的情况，建议将图片资源放到项目public目录下，使用绝对路径/assets/xxx.jpg引用，或者提前通过import引入图片资源。

修复后的代码示例 #

静态背景写法

<div style={{
  backgroundImage: 'url(./assets/paris.jpg)',
  minHeight: '100vh',
  backgroundRepeat: 'repeat',
  fontFamily: "'montseratt', sans-serif"
}}>

动态切换背景写法

你已经定义了fond状态存储对应城市的背景图路径，直接绑定到样式即可实现切换效果：

// 先给fond设置初始默认值
const [fond, setFond] = useState('./assets/paris.jpg')

// 渲染时绑定状态
<div style={{
  backgroundImage: `url(${fond})`,
  minHeight: '100vh',
  backgroundRepeat: 'repeat',
  fontFamily: "'montseratt', sans-serif"
}}>

内容的提问来源于stack exchange，提问作者pgmendormi