Images and media

A reference such as ./hero.png or ../assets/demo.mp4 stays unchanged in the copied file and normally breaks.

• Use a stable public URL when the integration owner will continue to host the media.
• Use an explicit app-owned placeholder when every app must supply product-specific media.
• Use a package-owned JS or CSS entrypoint only when every supported app toolchain can resolve and emit the underlying asset.
• Do not assume that a file inside node_modules is automatically served at a browser URL.

/template-assets/<path> is a preview-only fixture path. During copy, Astryx replaces a complete static image reference with an inline neutral SVG placeholder. It replaces a complete static video reference with an empty string because it cannot create a valid inline video.

• Supported preview image suffixes are SVG, PNG, JPG, JPEG, GIF, WebP, AVIF, and ICO.
• Supported preview video suffixes are MP4, WebM, MOV, OGV, and M4V.
• Keep the preview path as one complete static string. Concatenation, interpolation, method calls, module imports, and unknown file formats are rejected when Astryx cannot replace them safely.
• Use this path only when a placeholder is the intended copied result. It is not a way to ship required product media.
• Astryx serves /template-assets only in its own docs. A preview you host must serve that path itself.

When the app must provide the final asset, keep the replacement point obvious in the copied source. Preserve enough surrounding layout and example data that the template still teaches the pattern without pretending the final content is included.

tsx
const HERO_IMAGE = '/acme-dashboard-hero.jpg';
// Replace HERO_IMAGE with an app-owned public URL before shipping the page.
​
<img
  src={HERO_IMAGE}
  alt="Account health trends for the current quarter"
  width={1200}
  height={675}
/>

• Use accurate alternative text for informative images and alt="" for decoration.
• Provide dimensions or an aspect-ratio container so loading does not shift the page.
• For video, provide controls, a useful poster, and captions when the content requires them.
• Do not leave an inaccessible, expiring, authenticated, or environment-specific URL in copied source.

When you test the template in an app (astryx docs cli/integrations/building-blocks/templates/build-the-template/package-and-test/test-template-in-app), also confirm the following.

• The copied source shows the placeholder substitutions you expect.
• The network log has no missing, redirected, blocked, or unauthorized media requests.
• Each placeholder keeps the layout and says what the app must replace.