I am trying to build a blog with Svelte, my folder structure is as follow:
- posts:
- slug1:
- banner.webp
- content.md
- ...
- slug1:
- src:
- blog:
- +page.svelte
- +page.server.ts
- [slug]:
- +page.svelte
- +page.server.ts
- blog:
In the src/blog/[slug]/+page.server.ts I have the following code:
import { getPostMetadata, getPostBannerImageURL } from "$lib/blog"import type { PageServerLoad } from './$types';export const prerender = true;export const load: PageServerLoad = async ({ params }) => { return { slug: params.slug, metadata: getPostMetadata(params.slug), bannerURL: // Code I am trying to figure out };};
I want my code to be Server-Side Rendered and also I want to be able to statically compile it. I would like to add the banner image (/posts/${params.slug}/banner.webp) to the optimized asset of Vite and get the right URL to then be able to display.
I tried to dynamically import the image but it doesn't work:
bannerURL: await import(`../../../posts/${params.slug}/banner.webp`)
I have the following error:
TypeError: Cannot convert object to primitive value at String (<anonymous>) at escape_html (file:///Users/jlagesse/Documents/GitHub/adrien-lagesse.io/.svelte-kit/output/server/chunks/index.js:30:15) at _page (file:///Users/jlagesse/Documents/GitHub/adrien-lagesse.io/.svelte-kit/output/server/entries/pages/blog/_slug_/_page.svelte.js:8:416) at children (file:///Users/jlagesse/Documents/GitHub/adrien-lagesse.io/.svelte-kit/output/server/chunks/internal.js:1155:9) at _layout (file:///Users/jlagesse/Documents/GitHub/adrien-lagesse.io/.svelte-kit/output/server/entries/pages/_layout.svelte.js:202:3) at Root (file:///Users/jlagesse/Documents/GitHub/adrien-lagesse.io/.svelte-kit/output/server/chunks/internal.js:1150:5) at render (file:///Users/jlagesse/Documents/GitHub/adrien-lagesse.io/.svelte-kit/output/server/chunks/index.js:99:3) at Function._render [as render] (file:///Users/jlagesse/Documents/GitHub/adrien-lagesse.io/.svelte-kit/output/server/chunks/internal.js:1112:20) at render_response (file:///Users/jlagesse/Documents/GitHub/adrien-lagesse.io/.svelte-kit/output/server/index.js:1800:34) at async render_page (file:///Users/jlagesse/Documents/GitHub/adrien-lagesse.io/.svelte-kit/output/server/index.js:2627:12)