背景图像未在 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;

除实际背景外，所有内容都呈现。我尝试在这里查看各种内容，但没有 questions/answers 帮助。没有在图像中添加 require，什么都没有。

有人遇到同样的问题吗？

谢谢

Answer 1

您需要调整 div 的大小。尝试为 div

设置 height 和 width

背景图像未在 ReactJS 中呈现

Background Image not rendering in ReactJS

reactjs

tailwind-css