Skip to main content

Add Images to Your Landing Page

· 2 min read
Cosmin
Founder, Micropage

Most landing pages need at least one image: a hero image, a logo, a product screenshot, or an illustration.

Micropage keeps this simple by treating uploaded assets as project files that can be referenced from markup.

Example​

[site]
title: Product Demo

[Home -> /]

/// hero
h1: See it in action
p: Upload an image and reference it from your page markup.
img: <- hero.png

The img: <- hero.png syntax references a file stored in the project. The <- means "look up this filename in the project files."

In the Web App​

  1. Open your project and go to the Files tab.
  2. Upload the image file.
  3. Reference it in your page markup using img: <- filename.

The filename must match exactly what was uploaded.

In the CLI​

List project files:

micropage files list

Get a public URL for a file:

micropage files url hero.png

Why file references matter​

File references make pages more portable. The markup points to project assets rather than hardcoded external URLs, which keeps the project self-contained.

If you move or republish the project, the references still resolve correctly.

Practical use cases​

Typical images include:

  • logo
  • hero illustration or screenshot
  • product demo image
  • team photo
  • banner

Notes​

  • Files are scoped to a project.
  • Deleting a file that is referenced in markup will cause a broken image after the next build.
  • Supported file types depend on what the browser can display.

Next steps​

After images, useful next topics are: