#images to /assets during ssg

3 messages · Page 1 of 1 (latest)

stoic robin
#

Hi, my goal is to SSG my landing page, which has a hero image that should dynamically change based on the users theme preference. That is natively possible using the <picture> tag.
this code works in dev server:

export const useImagesLoader = routeLoader$(async () => {
  const imgs = await Promise.all([
    // @ts-expect-error complains because of missing &jsx at the end
    import("~/media/img_dark.png?w=2400&q=100&as=picture"),
    // @ts-expect-error
    import("~/media/img_light.png?w=2400&q=100&as=picture"),
  ]);

  const imgObjs: Array<{
    src: string;
    w: number;
    h: number;
  }> = imgs.map((img) => img.default.img);

  return {
    dark: imgObjs[0],
    light: imgObjs[1],
  };
});

// imagine the jsx that just grabs both images and places the props correctly

The emitted html looks like this after SSG:

<picture>
<source srcset="/assets/IzzBCtlh-img_light.png" media="(prefers-color-scheme: light)" width="2400" height="1490" q:id="s"><source srcset="/assets/BDOLVqXv-img_dark.png" media="(prefers-color-scheme: dark)" width="2400" height="1488" q:id="t"><img src="/assets/IzzBCtlh-img_light.png" width="2400" height="1490" class="landing_dashboard_img" q:id="u"></picture>

But! this doesn't emit files to /assets during SSG and thus those srcsets result in 404s.

How do I emit images during SSG?

#

images to /assets during ssg

stoic robin
#

worked around it by adding &inline to the import url