Astro Images and Images in Keystatic

[etmartinkazoo]

I have a homepage singleton as follows:

homepage: singleton({
  label: "Homepage",
  path: "src/content/_homepage",
  schema: {
    headingWord: fields.array(fields.text({ label: "Heading Word" }), {
      label: "Heading Word",
      itemLabel: (props) => props.value,
    }),
    heroTagline: fields.text({ label: "Hero Tagline" }),
    heroImage: fields.image({
      label: "Hero Image",
      directory: "public/images/home",
      publicPath: "/images/home/",
    }),
    portfolioHeading: fields.text({ label: "Portfolio Heading" }),
    portfolioSubheading: fields.text({ label: "Portfolio Subheading" }),
    servicesHeading: fields.text({ label: "Service Heading" }),
    servicesSubheading: fields.text({ label: "Service Subheading" }),
  },
}),

I would like to place the images in the assets directory in Astro so that I could make use of their great image optimization features. This won't work because I can't do something like import HeroImage from homepage.heroImage as imports do not allow dynamic values. It has to be a string literal. I have played around with import() but am having no luck.

This may ultimately be more of an issue with what can be done with JavaScript but was wondering if anyone was using images with Astro images rather than just plopping it in the public directory which isn't compressed.

Thanks!

[eyrewiut]

Hi! Several others are also having a similar problems regarding the content collections integration with astro assets.
Unfortunately keystatic prepends a / to file and image paths so the assets feature in astro won't automatically import them for you 🥲 #330

You have probably tried this already, but in case you haven't: const imgSrc = (await import("../../assets/" + filename + ".png")).default. Unfortunately vite forces you to have literal paths and file extensions though.

[JedWatson]

As of @keystatic/[email protected] we're no longer prepending the / at the start of publicPath for images.

Not sure what the full implications of this are (because there are so many ways and motivations for how people might have image working, across various frameworks) and it may be a breaking change for anyone depending on the / prefix without specifying it, but we wanted to unblock astro:assets compatibility so we've shipped it (see #471)

Let us know if there's anything else we can do to make this smoother 👍