CSS background url adds '/client/ to path

[Wolfr]

Given a new component:

<style>

    ul {
        width: 100%;
        background: url('trail.png');
    }

</style>

<img src="trail.png" alt="" />
<ul>
    <slot></slot>
</ul>

And an image called trail.png (just a gray dot)

The HTML one loads but the CSS one doesn't. The image is contained in the /static folder.

Expected behavior: both images should load.

What happens: if you inspect the CSS background URL path in the devtools, you'll see that /client is added to the URL. This causes a 404.

[Conduitry]

I'm inclined to say that this is not actually a bug, and that you should just be using absolute paths in component styles. I don't think we want Sapper to have to worry about fixing paths within the styles. (And if someone did put their images in static/client/whatever.png and referred to it as url(whatever.png) in their styles, anything we did to the path would break the image.) Perhaps this could be documented somewhere, but I don't think the behavior should change.

[Wolfr]

OK, I see, I just had no idea that I should put images in a /client folder inside of assets, this doesn't seem to be in the docs.

It might be obvious if you know Express/Polka or how it the asset logic was set up but I had no idea.

(Thanks for the quick answer BTW!)

[antony]

@Wolfr I don't think putting images in a client folder is what @Conduitry is suggesting.

The suggestion is to use absolute paths in component styles:

<style>

    ul {
        width: 100%;
        background: url('/trail.png');
    }

</style>

<img src="trail.png" alt="" />
<ul>
    <slot></slot>
</ul>

[Conduitry]

Yeah, using an absolute path is probably what I would suggest here. I was thinking about #867 when I mentioned the static/client thing. Although thinking about that issue again, 'just use absolute paths' might be the simpler solution there as well.

[Conduitry]

Potentially relevant old issue: #420

[pixeline]

I just found out that if you serve the SPA within a subfolder (as in a GitHub Pages), then an absolute path used in the CSS is not correctly resolved, even if the <base href="/path"/>is correct. It is correctly resolved if the image is used as an <img> tag.

[artemjackson]

@Conduitry

I'm inclined to say that this is not actually a bug, and that you should just be using absolute paths in component styles.

It does not work if project is hosted not from the domain root.

E.g. website which exported with --basepath=sapper-site and which sits on www.example.com/sapper-site.
In this particular case absolute url like url("/img/cool-img.jpg") will follow to www.example.com/img/cool-img.jpg instead of desired www.example.com/sapper-site/img/cool-img.jpg

UPD:
I've confirmed and rewrote @pixeline words

[xiaohk]

I also have the same issue as @pixeline and @artemjackson pointed out. I guess the current solution would be using a variable in the path? For example, src='{base}/img/test.png', and set base = '' or base='/sapper-site'.

[antony]

The way I've got this working is to use relative or absolute paths, with relative being relative to the directory that the component is in. I.e. as if we were running on your local machine, without bundling.