docs: adding recipe for dynamically importing Images#5391
Conversation
✅ Deploy Preview for astro-docs-2 ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
sarah11918
added
add new content
sarah11918
added
the
help - leave feedback
|
Thanks so much @jdwilkin4 for jumping on another issue! 💪 I'm going to ask @Princesseuh to take a look over this, as it's been a hot topic in our Discord lately and we know we really do need better guidance around this topic. There are a few directions a contribution like this could go in: a recipe, more explicit guidance on the images page itself, and I'd like Erika to see to comment about how close this was to what she had in mind. Also, to see whether there's anything additional (could be a separate PR!) she'd like covered, so that I know how this content fits into her idea of which new content needs to be added to docs. |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| } | ||
|
|
||
| const { imagePath, altText, name, age } = Astro.props; | ||
| const images = import.meta.glob<Record<string, () => Promise<{ default: ImageMetadata }>>('/src/**/*.{jpeg,jpg,png,gif}') |
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
There was a problem hiding this comment.
Agreed with @florian-lefebvre here: I'd love to see that original import function so as not to startle our non-TypeScript users.
Similar to my comment above about defining the prop types as optional, if it's helpful for TS users to know the shape, then after this code snippet there could be a mention separately of it.
Co-authored-by: Florian Lefebvre <contact@florian-lefebvre.dev>
sarah11918
left a comment
sarah11918
left a comment
There was a problem hiding this comment.
Hey @jdwilkin4 this is fabulous, and I can't tell you how thrilled I am to have this for docs! I so appreciate your conciseness and directness when providing instructions. That is very comforting to a reader and sets them up for success, and it's so important to us in Astro Docs here!
I've left you some suggestions to consider with my thinking behind them, so see what you think!
| - example-image-3.jpg | ||
| </FileTree> | ||
|
|
||
| :::note |
There was a problem hiding this comment.
I adore this note. Perfectly written and perfectly placed! 💜
sarah11918
removed
the
help - leave feedback
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>
kevinzunigacuellar
left a comment
kevinzunigacuellar
left a comment
There was a problem hiding this comment.
Awesome job, team! 🚀 Building on some feedback, I included a comment to enhance readability for TypeScript users by adding a type. Along the way, I encountered a couple of minor details while creating a reproduction. I've left comments that should fix them.
Thanks a lot @jdwilkin4, amazing recipe 🧑🍳
Co-authored-by: Kevin Zuniga Cuellar <46791833+kevinzunigacuellar@users.noreply.github.com>
sarah11918
left a comment
sarah11918
left a comment
There was a problem hiding this comment.
Alright, it's still Friday for me, and that means FriYay Merge Day! 🥳
Thank you @jdwilkin4 and everyone for helping get this recipe over the finish line! Once the checks pass, I'll merge this one so it can be helping people right away! 🙌
|
Hey @sarah11918 ! I pushed up one commit to remove that last of the incorrect Thanks 👍 |
sarah11918
left a comment
sarah11918
left a comment
There was a problem hiding this comment.
Alright, let's do this peeps! 🥳
5 participants
Deploy preview link
https://docs-git-fork-jdwilkin4-feat-dynamic-image-d06fcf-astrodotbuild.vercel.app/en/recipes/dynamically-importing-images/
Description (required)
This PR is responsible for adding a new recipe for dynamically importing images using Vite's
import.meta.globfunction.Related issues & labels (optional)