> ## Documentation Index
> Fetch the complete documentation index at: https://docs.allgoodhq.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Using an image in an email or page

> Point an email or landing page at a visual asset, so the image comes from one place and its address never changes.

A page or email doesn't hold its own copy of an image. It points at the address of a [visual asset](https://docs.allgoodhq.com/mk/content/visual-assets.md).

That keeps every use of the image in sync. Publish a new version of the image, and everything that uses its address shows it.

## Add an image to a page

Name the image in your brief, or ask Mary in Workshop to add it. For example: "Use the spring-launch hero at the top of the page."

Mary adds the reference to the page. When you publish, allGood replaces it with the image's live address.

**1. Publish the image first**

The image needs a published address before a page can show it. See [Visual assets](https://docs.allgoodhq.com/mk/content/visual-assets.md).

**2. Ask Mary to use it**

Name the image and say where it goes. She places it on the page.

**3. Preview the page**

Open the page's preview and check that the image shows. See [Previewing a landing page](https://docs.allgoodhq.com/mk/content/landing-pages/previewing-a-landing-page.md).

When this works, the image shows in the preview and on the live page after you publish.

## If a reference can't be found

A page that points at an image that doesn't exist can't be published. The Publish window names what's missing. Restore the image, or ask Mary to remove the reference. See [Checks before a page goes live](https://docs.allgoodhq.com/mk/content/landing-pages/checks-before-publishing.md).

## If you edit the code

A page's code holds the image as a reference such as `{{ asset.hero.url }}`, not as a typed address. Leave it in place. If you type an address over it, that image no longer follows the asset. See [Editing a landing page's code](https://docs.allgoodhq.com/mk/content/landing-pages/editing-the-code.md).

## Emails

An email uses the image's address the same way any email uses an image. Put the address in an image, or in a background, wherever the image goes. Copy the address from the image's card. Because the address never changes, you can change the image later without editing the email.

## Change the image later

Ask Mary to change the visual asset. It becomes a new version at the same address. Once you publish it, pages and emails that use the address show the new image.

## Related articles

* [Visual assets](https://docs.allgoodhq.com/mk/content/visual-assets.md)
* [Using an image you host elsewhere](https://docs.allgoodhq.com/mk/content/visual-assets/images-hosted-elsewhere.md)
* [Page components](https://docs.allgoodhq.com/mk/content/landing-pages/page-components.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.