Resolve result images against an absolute baseUrl

Relative images were resolved against the page URL, but only the
pathname was kept, so with a baseUrl on another domain the image
still loaded from the search site. Keep the origin when the page URL
has one, in the Component UI's resolveUrl filter and in both Default
UI result templates. result_with_subs.svelte didn't resolve images at
all before.

Fixes #573
This commit is contained in:
dualfroz committed 2026-10-03 01:33:54 +02:00
1 parent ed42ec389b
commit 573bb96204
6 files changed
+139 -5

No files matched your search

@@ -0,0 +1,49 @@
name: Web Components Tests > Image URLs are resolved against an absolute base URL
steps:
- step: I have the environment variable "PAGEFIND_SITE" set to "public"
- step: I have a "public/index.html" file with the content {html}
html: |-
<!DOCTYPE html><html lang="en"><head>
<link href="/pagefind/pagefind-component-ui.css" rel="stylesheet">
</head><body>
<pagefind-config preload base-url="https://example.com/"></pagefind-config>
<pagefind-input></pagefind-input>
<pagefind-results show-images></pagefind-results>
<script src="/pagefind/pagefind-component-ui.js" type="module"></script>
</body></html>
- step: I have a "public/blog/post/index.html" file with the content {html}
html: >-
<!DOCTYPE html><html
lang="en"><head></head><body><h1>Relative Image</h1><img
src="images/header.png"><p>A page with a relative image
URL.</p></body></html>
- step: I have a "public/about/index.html" file with the content {html}
html: >-
<!DOCTYPE html><html
lang="en"><head></head><body><h1>Absolute Image</h1><img
src="/images/hero.png"><p>A page with an absolute image
URL.</p></body></html>
- macro: I run Pagefind
- step: stdout should contain "Running Pagefind"
- step: I serve the directory "public"
- step: In my browser, I load "/"
- step: In my browser, I click the selector "pagefind-input input"
- step: In my browser, I type "image"
- step: In my browser, the console should be empty
- step: In my browser, I evaluate {js}
js: |-
let results = await toolproof.querySelector("pagefind-results ul");
await toolproof.waitFor(() => results.querySelectorAll("li a").length === 2);
- snapshot: In my browser, the result of {js}
js: |-
let results = await toolproof.querySelector("pagefind-results ul");
let items = Array.from(results.querySelectorAll("li"));
items.sort((a, b) => a.textContent.localeCompare(b.textContent));
return items.map(li => {
let title = li.querySelector("a").textContent;
let img = li.querySelector("img");
return title + ": " + (img ? img.getAttribute("src") : "no image");
}).join("\n");
snapshot_content: |-
╎Absolute Image: https://example.com/images/hero.png
╎Relative Image: https://example.com/blog/post/images/header.png