Is there a workaround?

[wiverson]

withastro/astro#4536

Just want to be able to automatically pull in the images from frontmatter to display on the home page. Is there a workaround you might suggest?

[prototypa]

Hi @wiverson

One important thing that I'm not sure is if you are using the Picture component from @astrojs/image or the one that is implemented in AstroWind (https://github.com/onwidget/astrowind/blob/main/src/components/core/Picture.astro).

Please confirm that for further investigation.

PD: In the case of the issue you refer to (withastro/astro#4536), I think the problem is directly related to Astro or Vite and the loading of images in relative paths or in the public folder

[prototypa]

You can review the updates that I have been making to the template, perhaps they will help you achieve your goals.

For Ex: HighlightedPosts.astro

The error that is shown (although it works) is related to typescript, they must have the type assigned incorrectly because according to the documentation the src attribute also allows the import function to be used directly.

Note: I'm still not satisfied with the final result of the template (I'm still understanding Astro), that's why it's still in version 0.2.0

[wiverson]

Ok, it's working now, here's my version:

https://gist.github.com/wiverson/697779257b9979ca07f3048f2bcad97d

...looks like it shares a bit in common with yours. Out of curiosity, why do you have your own Picture component?

[prototypa]

Hi @wiverson. Great that it works now.

I have my own Picture component because when I first started using it I didn't have a way to add a Tailwind CSS style class specifically to the child tag that is rendered. (And also because when I started with this I knew little about how Astro worked)

I'm going to review these days how @astrojs/image has been updated and maybe I'll transform all that.

[wiverson]

Well, I'm learning a ton every day. Between Astro 1.0 and SvelteKit changes, front-end is pretty wild, lol.

Looks like the Tailwind classes I'm setting on Image are working, I imagine Picture has a similar passthrough...?

[prototypa]

Yeah!!, front-end is pretty wild 😄

Related to Images and Pictures it's a super silly detail (check the following code). Soon I will refactor all that image stuff in the template and I will surely remove the custom Picture component.

<Image {attrs...} class="tw-shadow-md" />

<!-- renders to -->

<img {attrs...} class="tw-shadow-md />

But: (there are no ways to apply some styles directly to the image)

<Picture {attrs...} class="tw-shadow-md" />

<!-- renders to -->

<picture {attrs...} class="tw-shadow-md">
  <source {...} />
  <img {...image} {loading} {decoding} {alt} />
</picture>