Adding images to Astro blog posts.

May 11, 2026

Astro comes bundled in with optimizations and helpers for images which are detailed here.

To use the these within the markdown files that are used to create blog posts you need to import Image from astro and also the image itself. This allows you to use an image tag within the content.

One important thing to note is that these blog posts are actually MDX files, not standard markdown files, so they need to have a .mdx extension rather than .md.

Here is a simple example of a blog post with an image:

---
title: "Adding images to blog posts."
description: "Taking advantage of Astro image optimizations."
pubDate: 2026-05-11
---


import { Image } from "astro:assets";
import catImage from "@/assets/images/funny-cat-pic.png";

# Funny Cat Pic

<Image src={catImage} alt="A cat" />

Note: I have used the @/ alias in my image path, to do this you can add the following configuration to your astro.config.mjs:

resolve: {
      alias: {
        "@": fileURLToPath(new URL("./src", import.meta.url)),
      },
    },

in the vite section of the config file.