I am trying to set a div background but it is not working. if I use same relative path with img tag it works fine but if I try to do it with div it give me 404 error.

This img tag works

<img src="../../public/images/toyota_cross_background.png"/>

but div background-image give me 404 Not Found in the console

<div   style="background-image: url('../../public/images/toyota_cross_background.png');" data-stellar-background-ratio="0.5">

I also tried to use :style but still no luck.

:style="{'background-image':'url(../../public/images/toyota_cross_background.png)'}

is it something about VueJs that blocking it?

CodePudding user response：

The reason is the following, the src attribute starts from its position in the folder, while the CSS attributes start from the public folder.

So to access the same file from an src attribute this path works: ../../public/images/toyota_cross_background.png

And from the css, you need to use the following path: /images/toyota_cross_background.png (Directly as if you were in the public folder)