From a5e8a3a0a24a2c7828ab0649c7b55d7bf80379f4 Mon Sep 17 00:00:00 2001 From: Paul Valladares <85648028+dreyfus92@users.noreply.github.com> Date: Wed, 30 Aug 2023 19:27:33 -0600 Subject: [PATCH 1/5] add: added documentation regarding on old import behavior --- src/content/docs/en/guides/images.mdx | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/src/content/docs/en/guides/images.mdx b/src/content/docs/en/guides/images.mdx index 2588b39f0a9d8..73a3a5a3e2458 100644 --- a/src/content/docs/en/guides/images.mdx +++ b/src/content/docs/en/guides/images.mdx @@ -700,3 +700,24 @@ If you were using the image integration in Astro v2.x, complete the following st You can now declare an associated image for a content collections entry, such as a blog post's cover image, in your frontmatter using its path relative to the current folder. The new `image` helper for content collections lets you validate the image metadata using Zod. Learn more about [how to use images in content collections](/en/guides/images/#images-in-content-collections) + +### Navigating Image Imports in Astro v3.0 + +In Astro v3.0, if you find yourself wanting to preserve the old import behavior for images and require a string representation of the image's URL, consider appending `?raw` or `?url` to the end of your image path when importing it. For example: + +```astro title="src/pages/blog/MyImages.astro" +--- +import Sprite from '../assets/logo.svg?url'; +--- + + + + + +``` + +This approach ensures you obtain the URL string. Keep in mind that during development, Astro uses a `src/` path, but upon building, it generates hashed paths like `/_astro/cat.a6737dd3.png`. + +If you prefer to work directly with the image object, you can access the `.src` property. This approach can be especially handy for tasks like managing image dimensions for Core Web Vitals metrics. + +For those transitioning to the new import behavior, combining `?url` and `.src` methods might be the right spell for seamless image handling. From 4fc84430ac45403d2bb4d91af3601ea46d5a09a9 Mon Sep 17 00:00:00 2001 From: Paul Valladares <85648028+dreyfus92@users.noreply.github.com> Date: Thu, 31 Aug 2023 09:42:52 -0600 Subject: [PATCH 2/5] applied suggestion from bryce's review Co-authored-by: Bryce Russell --- src/content/docs/en/guides/images.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/en/guides/images.mdx b/src/content/docs/en/guides/images.mdx index 73a3a5a3e2458..bce511b4cee8d 100644 --- a/src/content/docs/en/guides/images.mdx +++ b/src/content/docs/en/guides/images.mdx @@ -703,7 +703,7 @@ The new `image` helper for content collections lets you validate the image metad ### Navigating Image Imports in Astro v3.0 -In Astro v3.0, if you find yourself wanting to preserve the old import behavior for images and require a string representation of the image's URL, consider appending `?raw` or `?url` to the end of your image path when importing it. For example: +In Astro v3.0, if you find yourself wanting to preserve the old import behavior for images and require a string representation of the image's URL, consider appending `?url` to the end of your image path when importing it. For example: ```astro title="src/pages/blog/MyImages.astro" --- From cac85cd9f115c83ce21d23c15fc8475107077d28 Mon Sep 17 00:00:00 2001 From: Paul Valladares <85648028+dreyfus92@users.noreply.github.com> Date: Thu, 31 Aug 2023 13:10:21 -0600 Subject: [PATCH 3/5] applied suggestion from elian's review pt.1 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Elian ☕️ --- src/content/docs/en/guides/images.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/en/guides/images.mdx b/src/content/docs/en/guides/images.mdx index bce511b4cee8d..d26939cf2acd7 100644 --- a/src/content/docs/en/guides/images.mdx +++ b/src/content/docs/en/guides/images.mdx @@ -718,6 +718,6 @@ import Sprite from '../assets/logo.svg?url'; This approach ensures you obtain the URL string. Keep in mind that during development, Astro uses a `src/` path, but upon building, it generates hashed paths like `/_astro/cat.a6737dd3.png`. -If you prefer to work directly with the image object, you can access the `.src` property. This approach can be especially handy for tasks like managing image dimensions for Core Web Vitals metrics. +If you prefer to work directly with the image object itself, you can access the `.src` property. This approach is best for tasks like managing image dimensions for Core Web Vitals metrics and preventing CLS. For those transitioning to the new import behavior, combining `?url` and `.src` methods might be the right spell for seamless image handling. From 722d7abc59458157613c2f8ef9212b1a58677043 Mon Sep 17 00:00:00 2001 From: Paul Valladares <85648028+dreyfus92@users.noreply.github.com> Date: Thu, 31 Aug 2023 13:10:32 -0600 Subject: [PATCH 4/5] applied suggestion from elian's review pt.2 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Elian ☕️ --- src/content/docs/en/guides/images.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/en/guides/images.mdx b/src/content/docs/en/guides/images.mdx index d26939cf2acd7..11d99439adb50 100644 --- a/src/content/docs/en/guides/images.mdx +++ b/src/content/docs/en/guides/images.mdx @@ -720,4 +720,4 @@ This approach ensures you obtain the URL string. Keep in mind that during develo If you prefer to work directly with the image object itself, you can access the `.src` property. This approach is best for tasks like managing image dimensions for Core Web Vitals metrics and preventing CLS. -For those transitioning to the new import behavior, combining `?url` and `.src` methods might be the right spell for seamless image handling. +If you are transitioning into the new import behavior, combining `?url` and `.src` methods might be the right method for seamless image handling. From 0200a923dfd068a0847aa9df27cb2e8e5247cd1d Mon Sep 17 00:00:00 2001 From: Paul Valladares <85648028+dreyfus92@users.noreply.github.com> Date: Thu, 31 Aug 2023 13:10:48 -0600 Subject: [PATCH 5/5] applied suggestion from elian's review pt.3 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Elian ☕️ --- src/content/docs/en/guides/images.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/en/guides/images.mdx b/src/content/docs/en/guides/images.mdx index 11d99439adb50..9cb5972fd4039 100644 --- a/src/content/docs/en/guides/images.mdx +++ b/src/content/docs/en/guides/images.mdx @@ -703,7 +703,7 @@ The new `image` helper for content collections lets you validate the image metad ### Navigating Image Imports in Astro v3.0 -In Astro v3.0, if you find yourself wanting to preserve the old import behavior for images and require a string representation of the image's URL, consider appending `?url` to the end of your image path when importing it. For example: +In Astro v3.0, if you have to preserve the old import behavior for images and require a string representation of the image's URL, append `?url` to the end of your image path when importing it. For example: ```astro title="src/pages/blog/MyImages.astro" ---