React应用内设置backgroundImage背景图不生效问题求助

核心问题点 #

• 内联样式属性名拼写错误：React 规定内联样式的绑定属性是style，你的代码中误写为styles（多了末尾的s），这是最直接的失效原因。
• 资源路径可能拼写错误：你代码中导入图片的路径写的是./../assests/img/bg-sec1.jpg，注意常规的资源文件夹命名是assets，如果你的本地文件夹名是assets而非assests（多了一个s），会导致图片导入失败。
• 容器宽高缺失：如果承载背景图的div没有设置宽高，或者内部元素没有撑起容器尺寸，背景图也不会正常渲染，需要给对应div设置宽度、高度或者最小高度。

修正后的代码示例 #

import React from 'react'
import "./Home.css"
// 注意确认路径中的文件夹名是否为assets
import bgImg from "./../assets/img/bg-sec1.jpg"

function Home() {
    return (
        <div>
          {/* 修正style属性名，同时补充宽高样式保证容器可渲染 */}
          <div style={{ 
            backgroundImage:`url(${bgImg})`,
            width: '100%',
            minHeight: '500px'
          }}>
            <h1>This is red car</h1>
        </div>
        </div>
    )
}

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