Relative asset paths broke usage of imagetools

[Amerlander]

Describe the bug

The relative asset paths for the static adapter do not work when I use vite imagetools.

The resulting paths are always starting with ./_app/... instead of /_app/.... So the images are only working on the root path and don't load on any subpage.

I'm not sure whether this has to be adopted in image tools or if there should be an option in svelte kit to disable that behavior. Maybe both. In general, I think relative paths are great and would love to have this feature work with imagetools.

Breaking PR in Svelte Kit: https://github.com/sveltejs/kit/pull/4250 Coresponding Issue in imagetools: https://github.com/JonasKruckenberg/imagetools/issues/367

Reproduction

1. clone https://github.com/Amerlander/image-import-test and npm i, npm run build:
2. Open /about-Page and check the source below the headline.

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (8) x64 Intel(R) Xeon(R) CPU E3-1231 v3 @ 3.40GHz    
    Memory: 11.75 GB / 31.93 GB
  Binaries:
    Node: 16.14.2 - E:\Program Files\nodejs\node.EXE
    Yarn: 1.9.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD    
    npm: 8.5.0 - E:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 104.0.5112.102
    Edge: Spartan (44.19041.1266.0), Chromium (103.0.1264.37) 
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.66 
    @sveltejs/adapter-static: ^1.0.0-next.39 => 1.0.0-next.39 
    @sveltejs/kit: next => 1.0.0-next.442 
    @sveltejs/vite-plugin-svelte: ^1.0.2 => 1.0.2 
    svelte: ^3.44.0 => 3.49.0 
    vite: ^3.0.4 => 3.0.9

Severity

blocking an upgrade

Additional Information

No response

[gyurielf]

Maybe it's related: https://github.com/sveltejs/kit/pull/6769

[mquandalle]

Do you know any workaround?

[intensr]

this is a major issue since no image is working on urls deeper than base, if we dont hardhack the baseurl. but that is not a viable solution since this makes prerenders impossible.

[GauBen]

Hey there, as a workaround you can do:

<script>
	import image from './image.png?webp';
</script>

<img src="/{image}" alt="image" />

[intensr]

i got away with something like that as i serve my images locally from an images folder within the static folder

...
import { page } from '$app/stores';
import { prerendering } from '$app/environment';

export let src = undefined;

const origin = prerendering ? '' : $page.url.origin;

const imageUrl = `${origin}/images/{src}`
...

thanks for the help tho

[frankmayer]

It seems to be an issue with imagetools after all. Can you pls check if your use case works with https://github.com/JonasKruckenberg/imagetools/pull/400?

[benmccann]

I talked to @pzerelles, the author of https://github.com/JonasKruckenberg/imagetools/pull/400, and he clarified that the issue is that Vite assets treats everything relative to Vite's basepath and not relative from where the asset is included, so Vite imagetools will need to use absolute paths rather than relative paths. Given that the issue is in imagetools and not Vite, I will go ahead and close this issue