URL encoding in search result images' src

[n-older]

We use Netlify's Image CDN to transform images but when we set the image key for data-pagefind-meta to the transformed image URL using query parameters, Pagefind seems to be encoding the &s into & when rendering the image in the search results, thus breaking the URL/image.

For example:

https://emailable.com/.netlify/images?fit=cover&fm=avif&h=720&url=https%3A%2F%2Fsanity-cdn.emailable.com%2Fproduction%2F0e09167ca2c53bc385def9f838d6c3f7d41a59a6-1600x900.png&w=1280

gets turned into

https://emailable.com/.netlify/images?fit=cover&fm=avif&h=720&url=https%3A%2F%2Fsanity-cdn.emailable.com%2Fproduction%2F0e09167ca2c53bc385def9f838d6c3f7d41a59a6-1600x900.png&w=1280

[bglw]

Hi @n-older 👋

Do you have any link you can provide to an example (or a reproduction)?

I ask because this is likely similar to some of the discussions in #459 (comment)

[n-older]

Hi @bglw

I unfortunately can't provide a link but I can provide snippets of the source code and the rendered HTML if that helps.

Source code for generating the page's image (some non-related arguments omitted for brevity):

<%= image_tag(
  data.featured_image,
  alt: data.title,
  data: {
    'pagefind-meta': "image:#{image_path(data.featured_image, h: 90, w: 160)}"
  }
) %>

Rendered HTML for page's image with metadata:

<img class="mt-[3.75rem] md:mt-20 mx-auto rounded-lg w-full md:max-w-5xl md:rounded-3xl" alt="Ultimate Email Deliverability Guide for Black Friday 2024" fetchpriority="high" data-pagefind-meta="image:/.netlify/images?fm=avif&h=90&url=https%3A%2F%2Fsanity-cdn.emailable.com%2Fproduction%2F0e09167ca2c53bc385def9f838d6c3f7d41a59a6-1600x900.png&w=160,image_alt:Ultimate Email Deliverability Guide for Black Friday 2024" src="/.netlify/images?fit=cover&fm=avif&h=1800&url=https%3A%2F%2Fsanity-cdn.emailable.com%2Fproduction%2F0e09167ca2c53bc385def9f838d6c3f7d41a59a6-1600x900.png&w=3200" width="1600" height="900" sizes="(max-width: 900px) calc(100vw - 40px), 840px">

Rendered HTML for search result image:

<img class="pagefind-ui__result-image svelte-4xnkmf" src="/.netlify/images?fm=avif&amp;amp;h=90&amp;amp;url=https%3A%2F%2Fsanity-cdn.emailable.com%2Fproduction%2F0e09167ca2c53bc385def9f838d6c3f7d41a59a6-1600x900.png&amp;amp;w=160,image_alt:Ultimate Email Deliverability Guide for Black Friday 2024" alt="Ultimate Email Deliverability Guide for Black Friday 2024">

[bglw]

Hi @n-older — thanks again for the report! Sorry for the delay in getting back to you.

A fix for this has landed in Pagefind v1.3.0 🎉 Let me know if you see any further issues 🙂