Images

In Markdown

Plain Markdown, no block needed: ![Alt text](/cat.png). Alone in its paragraph with a title, it becomes a figure:

![A cat on a sofa](/cat.png "Our cat, 2026")

<figure>
  <img src="/cat.png" alt="A cat on a sofa" loading="lazy" decoding="async" />
  <figcaption>Our cat, 2026</figcaption>
</figure>

Size it with attributes so the page doesn't shift: ![Alt](/cat.png){width="800" height="600"}. Uploads add them for you.

• data:image/… URLs work, for images only.

• An image without a URL (![]()) doesn't render. In the editor it's an empty card to fill.

• For responsive images or a CDN, replace img through components, e.g. { img: "NuxtImg" }.

In the editor

Images on their own line are cards: the picture, its caption and its alt text, edited in place. Arrowing onto a card selects it; Backspace or Delete removes it, Enter adds a paragraph after it. A card never turns back into Markdown; switch to source mode for that.

Uploads

Give the editor an upload function: it gets the File and resolves to its URL.

async function upload(file: File) {
  const body = new FormData();
  body.append("file", file);
  const { url } = await $fetch<{ url: string }>("/api/uploads", { method: "POST", body });
  return url;
}

While it uploads, the card shows the local file at its real size, so nothing moves when the URL arrives. Several files upload side by side, in order. A failed upload fires upload-error and removes its placeholder, or puts a replaced card back the way it was.

On the server, check what you're given: the file type by its first bytes, not its name, and a size limit. Don't accept SVG on your own origin: it can run script.

<script setup lang="ts">
const body = ref("Drop, paste or choose an image:\n\n![]()\n");
const editor = useTemplateRef("editor");
const error = ref("");

// Your endpoint stores the file and answers with its URL. Here: the image inlined,
// after a moment, so you can see it upload.
async function upload(file: File) {
  await new Promise((resolve) => setTimeout(resolve, 1500));
  return new Promise<string>((resolve) => {
    const reader = new FileReader();
    reader.addEventListener("load", () => resolve(String(reader.result)));
    reader.readAsDataURL(file);
  });
}
</script>

<template>
  <div class="writer-demo">
    <WriterToolbar :editor="editor" :items="['bold', 'italic', 'image']" />
    <WriterEditor
      ref="editor"
      v-model="body"
      label="Body"
      :upload="upload"
      @upload-error="(_, file) => (error = `Couldn't upload ${file.name}.`)"
    />
    <p class="writer-demo-stats">
      {{ error || (editor?.uploading ? "Uploading…" : "Ready to save") }}
    </p>
  </div>
</template>