import images from '../media/images';
<Image {...images.my_image} />
It works by using meta.import.glob to automatically discover all images and videos in their respective folders, and format them into objects and arrays based on their filenames. Images for different breakpoints should be named like <name>.S.jpg, <name>.M.jpg, <name>.L.jpg etc, while images that are meant to be in an array (e.g. for a side-by-side image pair) can be <name>.0.jpg, <name>.1.jpg. Where necessary these can be combined: <name>.0.S.jpg, etc
This is particularly useful for the ArchieML parsing convention, since you can simply drop image assets into the folder then reference them in your Google Doc like image: my_image. This will automatically load in the image props (including size variants) that correspond with that name, saving you a good deal of effort in needing to connect up the code and the Google doc.
This adds new import helpers to make it easier to require image and video assets. Instead of needing the developer to manually add lines like this:
You can instead do:
It works by using
meta.import.globto automatically discover all images and videos in their respective folders, and format them into objects and arrays based on their filenames. Images for different breakpoints should be named like<name>.S.jpg,<name>.M.jpg,<name>.L.jpgetc, while images that are meant to be in an array (e.g. for a side-by-side image pair) can be<name>.0.jpg,<name>.1.jpg. Where necessary these can be combined:<name>.0.S.jpg, etcThis is particularly useful for the ArchieML parsing convention, since you can simply drop image assets into the folder then reference them in your Google Doc like
image: my_image. This will automatically load in the image props (including size variants) that correspond with that name, saving you a good deal of effort in needing to connect up the code and the Google doc.