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?