Skip to content

Commit 5d90c8d

Browse files
brunoborgesCopilot
andcommitted
fix: resolve relative image paths in step.html viewer
Images referenced from markdown files with relative paths (e.g., ./images/foo.png) were broken when rendered through step.html on GitHub Pages. Added path rewriting in loadStep() to resolve image URLs against the markdown file's directory. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
1 parent dd77df1 commit 5d90c8d

1 file changed

Lines changed: 8 additions & 0 deletions

File tree

docs/step.html

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -257,6 +257,14 @@
257257
if (!response.ok) throw new Error(`HTTP ${response.status}`);
258258
let md = await response.text();
259259
md = processMarkdown(md);
260+
261+
// Fix relative image paths to resolve against the markdown file's directory
262+
const stepDir = step.file.substring(0, step.file.lastIndexOf('/') + 1);
263+
md = md.replace(/!\[([^\]]*)\]\((?!https?:\/\/|\/\/)([^)]+)\)/g, (match, alt, path) => {
264+
const cleanPath = path.replace(/^\.\//, '');
265+
return `![${alt}](${GITHUB_RAW_BASE}${stepDir}${cleanPath})`;
266+
});
267+
260268
document.getElementById('markdown-content').innerHTML = marked.parse(md);
261269
} catch (err) {
262270
document.getElementById('markdown-content').innerHTML = `

0 commit comments

Comments
 (0)