关于CSS中background:url()插入背景图片，图片路径的问题

写了一个css的练习，需要在一个盒子中插入图片作为背景，css代码如下（插入背景图片的代码在第五行）：

.search-btn::before {
    content: "";
    display: block;
    width: 20px;
    height: 18px;
    background: url(image/search-btn.png) no-repeat;
}

我的项目结构如下（上文的代码在index.css中，我想要插入的图片是image目录下的search-btn.png）：

在做这个练习的时候，我参考了pink老师的视频，以及一位大佬的博客:CSS中background:url(图片) 不能显示的问题，由此得知，我在css目录下的文件里，引入与css同级的image目录下的文件时，应该在路径前加上"../"，表示从css目录这一级，向前退一级，也就是退到css和image的父文件夹那一级，再打开image/search-btn.png，才算正确。

于是我照葫芦画瓢，把路径写成了这个样子：

background: url(../image/search-btn.png) no-repeat;

再次运行，图片正常显示。