From 84dec24e1d3ef086b5f3bb50e7642146e75c4dcf Mon Sep 17 00:00:00 2001 From: Korbs <korbs@sudovanilla.org> Date: Thu, 12 Dec 2024 17:49:50 -0500 Subject: [PATCH] Add Image component --- src/components/Image.astro | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 src/components/Image.astro diff --git a/src/components/Image.astro b/src/components/Image.astro new file mode 100644 index 0000000..898ea9d --- /dev/null +++ b/src/components/Image.astro @@ -0,0 +1,17 @@ +--- +// Properties +const { + Source, + Alt +} = Astro.props +--- + +<img + src={Source} + alt={Alt} + onload="this.style.transition = '1s opacity'; this.style.opacity = '1'" +/> + +<!-- Once the image is done loading, instead of cutting in, try to fade in instead. --> +<!-- See the `onload` script in the image tag. --> +<style>img {opacity: 0}</style> \ No newline at end of file