如何在子目录中使用背景图像？

Question

I am having issues setting background-image when I move the picture into an image folder.

When my folder structure looks like this

 Site
   |
   |+ index.html
   |
   |+ style.css
   |
   |+ image.jpg
   |
   |+ images
          |
          |other images

and in my stlye.css file I have the following which is working as I would expect and the background image displays correctly

#topContainer {
    background-image: url("image.jpg");
    height: 400px;
    width: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: #f2f2f2;
    text-shadow: -0.3px -0.3px 0 #73736d, 0.3px -0.3px 0 #73736d, -0.3px 0.3px 0 #73736d, 0.3px 0.3px 0 #73736d;
}

However, if I move the image.jpg to the images folder and change the background-image line in the css to be any of the following the image does not show up anymore

background-image: url("images/image.jpg");
background-image: url("/images/image.jpg");
background-image: url('images/image.jpg');
background-image: url('/images/image.jpg');

I thought that any of these should work, but is there a different way I am supposed to input a file path to the background-image?

Answer 1

试试看： background-image: url('@/images/image.jpg');