背景图像未在 ReactJS 中呈现

Question

我需要在我的网站上有一张背景图片。我尝试使用 img 标签，这个标签确实有效，但因为我正在尝试使用 Tailwind 来设置我的图像样式，所以我更喜欢使用 background 标签。

这是我当前组件的代码：

import React from 'react';
import Header from '../components/Header';
import houseImg from '../imgs/house-backg-orig.jpg'
import HomePageDescr from '../components/HomePageDescr'

function Home() {

  return (
      
    <div className="">
      <Header/>
      <div style={{ backgroundImage: `url('${houseImg}')` }} />
      <HomePageDescr/>
    </div>
  );
}
export default Home;

除了实际背景之外，一切都呈现。我尝试在这里查看各种内容，但没有任何问题/答案有帮助。没有在图像中添加require，什么都没有。

有人遇到过同样的问题吗？

谢谢

Answer 1

您需要调整div 的大小。尝试为 div 设置 height 和 width