Question

我有以下问题：背景图像可以正常工作，但部署后却无法正常工作，该图像位于公用文件夹的文件夹中，这是我的代码：反应成分：

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; 
}

Answer 1

'/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文件相同的同一文件夹中，以尝试访问它，并查看在将图像移到更远之前是否可以在其中获得成功。

部署后背景图片不起作用

1 个答案: