Quantcast
Channel: Active questions tagged svelte - Stack Overflow
Viewing all articles
Browse latest Browse all 1655

How to import an image during the +page.js load() function?

$
0
0

I am trying to build a blog with Svelte, my folder structure is as follow:

  • posts:
    • slug1:
      • banner.webp
      • content.md
    • ...
  • src:
    • blog:
      • +page.svelte
      • +page.server.ts
      • [slug]:
        • +page.svelte
        • +page.server.ts

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)

Viewing all articles
Browse latest Browse all 1655

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>