如何解决ReactJS无法渲染背景图片
我的网站上需要有背景图片。我尝试使用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
添加到图像中,什么也没有。
有人遇到同样的问题吗?
谢谢
解决方法
您需要调整div
的大小。尝试为div设置height
和width
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。