Search code examples
sveltesveltekit

Fallback to the "default browser behavior" on an URL instead of interpreting it as a SvelteKit route


I have a route on the path /src/routes/[first]/[[second]]/+page.ts.

So far so good.

But! Now I also have static assets such as /static/attachments/image1.jpg. These assets are unreachable because the [first]/[[second]] route gets in the way.

To clarify, if I write an anchor tag such as <a href="/attachments/image1.jpg">Download the picture</a>, clicking this link will lead the visitor's browser to try to run the [first]/[[second]] route, not just download the asset.

Sidenote: oddly enough, it works fine with img tags, i.e. <img src="/attachments/image1.jpg"></img> will render an image as intended. So the path exists. I just need to make the SvelteKit router understand that for the a tag too.

Question: is there something like a way to "throw redirect()" to treat an URL as just an asset?

PS: yes I know about the possibility of importing the assets via Javascript using import statements, which would be ideal, but not an option since my anchor tags are autogenerated coming from inside a {@html post.content} expression. So I must use static asset paths.


Solution

  • You have to add the rel="external" attribute to your link tag. Please see the SvelteKit documentation about Link options for details about this. A data-sveltekit-reload might not what you are looking for as you try to link an asset and want to prevent a svelte route to be linked.