Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Failed parsing 'srcset' attribute value since it has an unknown descriptor. #9535

Closed
1 task done
walter9388 opened this issue Dec 27, 2023 · 0 comments · Fixed by #9537
Closed
1 task done

Failed parsing 'srcset' attribute value since it has an unknown descriptor. #9535

walter9388 opened this issue Dec 27, 2023 · 0 comments · Fixed by #9537
Labels
- P3: minor bug An edge case that only affects very specific usage (priority) feat: assets Related to the Assets feature (scope)

Comments

@walter9388
Copy link
Contributor

Astro Info

Astro                    v4.0.7
Node                     v18.17.0
System                   Linux (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/mdx
                         @astrojs/sitemap
                         @astrojs/react
                         @astrojs/tailwind

If this issue only occurs in one browser, which browser is a problem?

Chrome (haven't tested others)

Describe the Bug

When an image path name has a space in it, srcset doesn't work properly in chrome.

For example, when doing the following:

---
import { Image } from "astro:assets";
import image1 from "../assets/image 1.jpg";
---

<!doctype html>
<html lang="en">
  <body>
    <Image
      src={image1}
      alt="test-image"
      widths={[240, 540, 720, image1.width]}
      sizes={`(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, ${image1.width}px`}
      loading={"eager"}
    />
  </body>
</html>

I get the following output in the console in chrome after the build (this prevents the correct behaviour).
image

We can see this is because the space hasn't been correctly parsed into %20 in the HTML img element:

<img src="/_astro/image 1.yeyrKOPY_Z6ITw9.webp" srcset="/_astro/image 1.yeyrKOPY_Zmcymq.webp 240w, /_astro/image 1.yeyrKOPY_Z2i6AKl.webp 540w, /_astro/image 1.yeyrKOPY_Zg2MlG.webp 720w, /_astro/image 1.yeyrKOPY_Z6ITw9.webp 3072w" alt="test-image" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 3072px" loading="eager" width="3072" height="3560" decoding="async">

What's the expected result?

The build step should replace the srcset path spaces with %20 like so:

<img src="/_astro/image 1.yeyrKOPY_Z6ITw9.webp" srcset="/_astro/image%201.yeyrKOPY_Zmcymq.webp 240w, /_astro/image%201.yeyrKOPY_Z2i6AKl.webp 540w, /_astro/image%201.yeyrKOPY_Zg2MlG.webp 720w, /_astro/image%201.yeyrKOPY_Z6ITw9.webp 3072w" alt="test-image" sizes="(max-width: 360px) 240px, (max-width: 720px) 540px, (max-width: 1600px) 720px, 3072px" loading="eager" width="3072" height="3560" decoding="async">

This produces no errors and it works properly now in Google Chrome.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-mdbw9p?file=src%2Fpages%2Findex.astro

Participation

  • I am willing to submit a pull request for this issue.
@github-actions github-actions bot added the needs triage Issue needs to be triaged label Dec 27, 2023
@walter9388 walter9388 mentioned this issue Dec 27, 2023
Merged
@florian-lefebvre florian-lefebvre added - P3: minor bug An edge case that only affects very specific usage (priority) feat: assets Related to the Assets feature (scope) and removed needs triage Issue needs to be triaged labels Dec 28, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
- P3: minor bug An edge case that only affects very specific usage (priority) feat: assets Related to the Assets feature (scope)
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: handle srcset local image paths with spaces walter9388/astro
2 participants
@walter9388 @florian-lefebvre