fix(help): resolve screenshot paths under Vite subpath deploy

Markdown guides use /help-screenshots/... (root-relative). With Vite
base=/video-accessibility/, images were requested at the wrong URL.
Custom img renderer now prepends import.meta.env.BASE_URL so paths
resolve correctly on both /video-accessibility/ and local dev.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Vadym Samoilenko 2026-05-01 13:14:47 +01:00
parent 67219797b6
commit ce048a2196

View file

@ -299,16 +299,21 @@ export function Help() {
},
img({ src, alt }) {
if (!src) return null;
// Markdown guides use root-relative paths like /help-screenshots/...
// Prepend Vite base so they resolve correctly under any subpath deploy.
const resolvedSrc = src.startsWith('/help-screenshots/')
? `${import.meta.env.BASE_URL}${src.slice(1)}`
: src;
return (
<span className="block my-4">
<button
type="button"
className="cursor-zoom-in p-0 border-0 bg-transparent block w-full text-left focus:outline-none focus:ring-2 focus:ring-indigo-400 rounded-xl"
onClick={() => openLightbox(src, alt ?? '')}
onClick={() => openLightbox(resolvedSrc, alt ?? '')}
aria-label={`View full-size: ${alt ?? 'screenshot'}`}
>
<img
src={src}
src={resolvedSrc}
alt={alt}
className="rounded-xl border border-gray-200 shadow-md max-w-full hover:shadow-lg hover:scale-[1.01] transition-all duration-200"
/>