时间戳

首页 > 解决方案 > 部署后背景图像不起作用

css - 部署后背景图像不起作用

问题描述

我有以下问题：背景图像完美运行，然后部署后它不是，图像位于公共文件夹的文件夹中这是我的代码：反应组件：

function Header() {
return (
    <div className="bannerContainer">
        <div className="banner">
            <h1>news reader</h1>
            
        </div>
        <h3>USER GUID</h3>
    </div>
    )
}

CSS样式：

.banner {
height: 20vh;
width: 100%;
background-image: url('/images/banner1.png');  
background-position: center;
background-size: cover;
background-repeat: no-repeat; 
}

标签： cssreactjs

解决方案

'/images/banner1.png'是绝对路径。它将从被认为是root的任何地方开始。对于您的本地环境和部署的环境，这可能会有所不同。

最佳做法是使用相对路径，以便它不依赖于根的开始位置：

background-image: url('../relative/path/to/banner1.png');       /* example 1 */
background-image: url('./also/relative/path/to/banner1.png');   /* example 2 */

编辑：要测试问题是否与您的网址有关，请将您的路径替换为我们知道有效的常规图片链接。就像是：

background-image: url("https://homepages.cae.wisc.edu/~ece533/images/airplane.png");

如果图像确实出现在背景中，那么问题肯定出在您的图像路径上。

在这种情况下，我建议玩弄它。将图像放置在与试图访问它的 CSS 文件相同的文件夹中，并在将图像移到更远之前看看是否可以在那里获得任何成功。

推荐阅读