Exported PDFs missing local images in slide body #2433

alchemmist · 2026-01-16T20:45:46Z

alchemmist
Jan 16, 2026

Sorry, maybe, it's very nooby question, because I can't find same discussions.

I'm making slide with image:

---
layout: full
---

# More in [documentation](https://cli.github.com/manual/gh_api)<MarkerX color="#5d3fd3" title="api" />

<img src="/assets/gh-cli-doc.png" />

When I export to pdf, I expected that slide will contain image, same as in web, but slide is empty. I see heading level one, and white space.

Buy the way, in this slide:

---
layout: image-right
image: /assets/postgres-repo.png
background-position: left
shadow: true
---

## Postgres DBMS <span class="mono-text">(MIT/BSD)</span><MarkerX color="#0096FF" title="open-source" />

<ul>
<li v-click>Full access to the source code</li>
<li v-click>Use in commercial products</li>
...

image in background stay in pdf.

I export to pdf with this command:

yarn run slidev export --wait 100000 --wait-until load --format pdf --output ../build/pdf/01-lecture.en.pdf 01-lecture.en.md

Here is structure of my dir, from which i run this command:

Project structure

.
├── 01-lecture.en.md
├── 01-lecture.ru.md
├── README.md
├── netlify.toml
├── package.json
├── public
│   └── assets
│       ├── alchemmist-logo.svg
│       ├── angularjs-repo.png
│       ├── cpm-logo.svg
│       ├── cu-logo.svg
│       ├── favicon.ico
│       ├── fonts
│       ├── gh-cli-doc.png
│       ├── github-api-doc.png
│       ├── github-tokens.png
│       ├── in-science-senter-logo.svg
│       ├── linux-repo.png
│       ├── paul-graham.png
│       ├── pg-vs-pgpro.png
│       ├── postgres-pro.png
│       ├── postgres-repo.png
│       ├── pranay-ahlawat.png
│       ├── programming-books.png
│       └── react-repo.png
├── snippets
│   └── external.ts
├── theme
│   ├── LICENSE
│   ├── components
│   │   ├── Card.vue
│   │   ├── Footer.vue
│   │   ├── GitHubAlert.vue
│   │   ├── Marker.vue
│   │   ├── MarkerX.vue
│   │   ├── Pagination.vue
│   │   └── Quote.vue
│   ├── example.md
│   ├── global-top.vue
│   ├── layoutHelper.ts
│   ├── layouts
│   │   ├── 404.vue
│   │   ├── center.vue
│   │   ├── cover.vue
│   │   ├── default.vue
│   │   ├── end.vue
│   │   ├── error.vue
│   │   ├── fact.vue
│   │   ├── full.vue
│   │   ├── iframe-left.vue
│   │   ├── iframe-right.vue
│   │   ├── iframe.vue
│   │   ├── image-left.vue
│   │   ├── image-right.vue
│   │   ├── image.vue
│   │   ├── intro.vue
│   │   ├── none.vue
│   │   ├── quote.vue
│   │   ├── section.vue
│   │   ├── statement.vue
│   │   ├── two-cols-header.vue
│   │   └── two-cols.vue
│   ├── package.json
│   ├── setup
│   │   ├── code-runners.ts
│   │   └── shiki.ts
│   └── styles
│       ├── index.css
│       ├── index.ts
│       ├── layouts.css
│       └── prism.css
├── vercel.json
└── yarn.lock

10 directories, 64 files

Answered by alchemmist

Jan 18, 2026

Hooray! 🎉

I found the solution. I wrote a custom component Image.vue.

Image.vue

<script setup lang="ts">
import { ref, computed } from "vue";
import { handleBackground } from "../layoutHelper";

const props = defineProps({
  src: { type: String, required: true },
  alt: { type: String, default: "" },
  class: { type: String, default: "" },
  width: { type: String, default: "100%" },
  backgroundSize: { type: String, default: "contain" },
  dim: { type: Boolean, default: false },
  style: { type: Object as () => Record<string, string>, default: () => ({}) },
});

const resolvedSrc = computed(() => {
  const base = import.meta.env.BASE_URL || "/"
  const srcPath = props.src.startsWith("/") ?

View full answer

GopalDose · 2026-01-16T21:27:05Z

GopalDose
Jan 16, 2026

Root cause

This is not a timing issue (--wait won’t help here).
The PDF export uses a headless browser, and absolute paths in raw HTML <img> tags (/assets/...) often fail to resolve, even though they work in the web preview.

That’s why:

image: in frontmatter works (Slidev handles it internally)
<img src="/assets/..."> renders empty in PDF

✅ Solution 1 (Recommended): Remove the leading `/`

When using plain HTML in Slidev, prefer relative paths.

<img src="assets/gh-cli-doc.png" />

Why this works:

public/ is treated as the web root
Removing / prevents path resolution issues in headless PDF export

✅ Solution 2: Use Slidev’s built-in `image` layout (Most reliable)

Since you’re already using layout: full, consider switching to the native image layout:

---
layout: image
image: /assets/gh-cli-doc.png
---
More in documentation<MarkerX color="#5d3fd3" title="api" />

This uses the same rendering pipeline as your working Postgres slide, so it exports correctly to PDF.

✅ Solution 3: Explicit relative path (Fallback)

If the above still fails, use an explicit filesystem-relative path:

<img src="./public/assets/gh-cli-doc.png" />

This bypasses Slidev’s asset resolution entirely.

Why `--wait` didn’t fix it

Even with:

--wait 100000 --wait-until load

the exporter cannot load an image that resolves to 404.
The blank space you see is simply the browser rendering a broken image.

1 reply

alchemmist Jan 17, 2026
Author

Thank you very much for very detailed answer! 🔥

But still I have trubbles.

In first solution I got a error.

Error log:

$ /home/alchemmist/code/eosp/slides/node_modules/.bin/slidev export --format pdf --output ../build/pdf/01-lecture.en.pdf 01-lecture.en.md
[Slidev] Try the new browser exporter!
You can use the browser exporter instead by starting the dev server as normal and visit localhost:<port>/export

(node:11239) Warning: `--localstorage-file` was provided without a valid path
(Use `node --trace-warnings ...` to show where the warning was created)


  ●■▲
  Slidev  v52.11.0

  theme       ./theme
  css engine  unocss
  entry       /home/alchemmist/code/eosp/slides/01-lecture.en.md
  ◆ rendering...10:15:28 AM [vite] (client) Pre-transform error: Failed to resolve import "assets/gh-cli-doc.png" from "01-lecture.en.md__slidev_22.md". Does the file exist?
  Plugin: vite:import-analysis
  File: /home/alchemmist/code/eosp/slides/01-lecture.en.md__slidev_22.md:22:24
  20 |  }
  21 |  import { createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, createVNode as _createVNod...
  22 |  import _imports_0 from 'assets/gh-cli-doc.png'
     |                          ^
  23 |
  24 |
10:15:28 AM [vite] (client) Pre-transform error: Failed to resolve import "assets/gh-cli-doc.png" from "01-lecture.en.md__slidev_22.md". Does the file exist?
  Plugin: vite:import-analysis
  File: /home/alchemmist/code/eosp/slides/01-lecture.en.md__slidev_22.md:22:24
  20 |  }
  21 |  import { createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, createVNode as _createVNod...
  22 |  import _imports_0 from 'assets/gh-cli-doc.png'
     |                          ^
  23 |
  24 |
  ▲ rendering...10:15:29 AM [vite] Internal server error: Failed to resolve import "assets/gh-cli-doc.png" from "01-lecture.en.md__slidev_22.md". Does the file exist?
  Plugin: vite:import-analysis
  File: /home/alchemmist/code/eosp/slides/01-lecture.en.md__slidev_22.md:22:24
  20 |  }
  21 |  import { createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, createVNode as _createVNod...
  22 |  import _imports_0 from 'assets/gh-cli-doc.png'
     |                          ^
  23 |
  24 |
      at TransformPluginContext._formatLog (file:///home/alchemmist/code/eosp/sli

With third solution image again miss in pdf:

Second solution for me doesn't fit in general, because I need to put image into slide, not using as a background.

You told about "Slidev handles it internally". I tried to deal with it. I opened source code of image-right.vue layout, which using in Postgres slide, and saw usage of function handleBackground. In function handleBackground I found call of this function:

export function resolveAssetUrl(url: string) {
  if (url.startsWith("/")) return import.meta.env.BASE_URL + url.slice(1);
  return url;
}

And I wrote a custom component Image.vue, that use resolveAssertUrl too:

<script setup lang="ts">
import { computed } from "vue";
import { resolveAssetUrl } from "../layoutHelper";

const props = defineProps({
  src: { type: String, required: true },
  alt: { type: String, default: "" },
  class: { type: String, default: "" },
  style: { type: Object as () => Record<string, string>, default: () => ({}) },
});

const resolvedSrc = computed(() => resolveAssetUrl(props.src));
</script>

<template>
  <img :src="resolvedSrc" :alt="alt" :class="class" :style="style" />
</template>

Then I used it in my slide:

---
layout: full
---

# More in [documentation](https://cli.github.com/manual/gh_api)<MarkerX color="#5d3fd3" title="api" />

<Image src="/assets/gh-cli-doc.png" />

It's works when I'm running yarn and open in web page, but in pdf it's again missing.

Please, can you explain this situation for me 🙏

GopalDose · 2026-01-17T11:12:35Z

GopalDose
Jan 17, 2026

Why it still breaks (even with `resolveAssetUrl`)

resolveAssetUrl() only rewrites the URL string:

/assets/gh-cli-doc.png
→ /base/assets/gh-cli-doc.png

This is enough for Vite dev server / normal browser rendering.

But PDF export is different:

Slidev renders slides using a headless Chromium instance.
During export:

The HTML is rendered in a virtual page
Puppeteer resolves <img src="..."> as a real network request
If that request is not accessible from the headless context, it is silently dropped
The slide renders, but the <img> has no bitmap → blank space

Background images work because Slidev injects them as CSS background-image during build time, not as runtime <img> fetches.

So your custom <Image> component still ends up as:

<img src="/assets/gh-cli-doc.png">

and Puppeteer still fails to fetch it.

The actually reliable way to embed body images for PDF

Use Vite’s asset pipeline instead of raw public paths.

1️⃣ Import the image (this forces bundling)

Create a small helper component:

<script setup lang="ts">
import ghCliDoc from "/public/assets/gh-cli-doc.png";
</script>
<template>

<img :src="ghCliDoc" />

</template>

or inline in slide:

<script setup>

import ghCliDoc from '/public/assets/gh-cli-doc.png'

</script>
<img :src="ghCliDoc" />

Now the image is:

Included in the Vite build
Inlined or copied into the export bundle
Always available to Puppeteer during PDF render

This is why this method works when everything else fails.

2️⃣ Or use Markdown image syntax (simplest)

1 reply

alchemmist Jan 18, 2026
Author

Thank you!

But again, first way it's doesn't render image even in web page; second way if I'm correct understand mean this:

![](/assets/gh-cli-doc.png)

This is work in web page, but again in pdf blank page...

ismaildasci · 2026-01-17T15:37:33Z

ismaildasci
Jan 17, 2026

the issue is that <img src> tag doesnt get processed during pdf export but layout images do.

for pdf export you need to use the proper slidev image syntax:

option 1: use markdown image

![](/assets/gh-cli-doc.png)

option 2: import image in script

<script setup>
import ghCliDoc from "/assets/gh-cli-doc.png"
</script>

<template>
  <img :src="ghCliDoc" />
</template>

option 3: use base64 inline
if nothing works, convert image to base64 and use data url

the reason layout images work is because they go through vites asset pipeline. but raw <img src> in slide body doesnt get the same treatment during playwright pdf render.

also try adding --with-clicks flag:

yarn slidev export --with-clicks --wait 100000 --format pdf ...

and check if images are in public folder correctly. sometimes path issue

1 reply

alchemmist Jan 18, 2026
Author

Thank you!

I'm trying option one but again got blank slide in pdf. Second option for me not working even in web page.

Base64 maybe will work, but it's not good, you know, because it will be mess in source of slides...

alchemmist · 2026-01-18T06:54:24Z

alchemmist
Jan 18, 2026
Author

Guys, I am very grateful for your help. I feel my self very stupid, because I can't resolve this simple problem.

Code from my case is open in repo: https://github.com/alchemmist/eosp

Here in slides folder my slidev project with 01-lecture.en.md with this slide. I'm building it with running make build from root directory. Maybe it will be easily for you if try manually run it.

Thank you a lot, again! 🙏

@ismaildasci @GopalDose

0 replies

alchemmist · 2026-01-18T12:53:25Z

alchemmist
Jan 18, 2026
Author

Hooray! 🎉

I found the solution. I wrote a custom component Image.vue.

Image.vue

<script setup lang="ts">
import { ref, computed } from "vue";
import { handleBackground } from "../layoutHelper";

const props = defineProps({
  src: { type: String, required: true },
  alt: { type: String, default: "" },
  class: { type: String, default: "" },
  width: { type: String, default: "100%" },
  backgroundSize: { type: String, default: "contain" },
  dim: { type: Boolean, default: false },
  style: { type: Object as () => Record<string, string>, default: () => ({}) },
});

const resolvedSrc = computed(() => {
  const base = import.meta.env.BASE_URL || "/"
  const srcPath = props.src.startsWith("/") ? props.src.slice(1) : props.src
  return `${base}${srcPath}`
})

const imgAspect = ref<number | null>(null)
const loadImage = () => {
  const img = new Image()
  img.src = resolvedSrc.value
  img.onload = () => {
    imgAspect.value = img.naturalHeight / img.naturalWidth
  }
}
loadImage()

const backgroundStyle = computed(() => {
  const style: Record<string, string> = {
    ...handleBackground(resolvedSrc.value, props.dim, props.backgroundSize),
    width: props.width ?? "100%",
    ...props.style,
  }

  if (imgAspect.value) {
    style.aspectRatio = `${1 / imgAspect.value}`
  }

  return style
})
</script>

<template>
  <div
    :class="['slidev-image', props.class]"
    :style="backgroundStyle"
    role="img"
    :aria-label="alt"
  />
</template>

And unfortunately this required changes in layoutHelper.ts just for image-right layout working correctly to:

layoutHelper.ts

import type { CSSProperties } from "vue";

/**
 * Resolve urls from frontmatter and append with the base url
 */
export function resolveAssetUrl(url: string) {
  if (url.startsWith("/")) return import.meta.env.BASE_URL + url.slice(1);
  return url;
}

export function handleBackground(
  background?: string,
  dim = false,
  backgroundSize = "cover",
): CSSProperties {
  const isString = typeof background === "string";
  const isColor =
    isString && (background[0] === "#" || background.startsWith("rgb"));

  const style: CSSProperties = {
    background: isColor ? background : undefined,
    color: isString && !isColor ? "white" : undefined,
    backgroundImage:
      isString && !isColor
        ? dim
          ? `linear-gradient(#0005, #0008), url(${background})`
          : `url("${background}")`
        : undefined,
    backgroundRepeat: "no-repeat",
    backgroundPosition: "center",
    backgroundSize,
  };

  if (!style.background) delete style.background;

  return style;
}

And I use in my markdown sources like this:

---
layout: full
---

<Image src="/assets/gh-cli-doc.png" />

I understand it can be very clumsy and ugly and unidiomatic solution. Sorry for that, but it's work for me and I happy of it.

Maybe, you can offer more idiomatic solution? If not, I will mark as answer this is comment and close question.

Thank you!

1 reply

alchemmist Jan 22, 2026
Author

A few days, nobody answer to me. Mark this as answer and close discussion, because it's closing my goal.

alchemmist · 2026-01-18T13:01:40Z

alchemmist
Jan 18, 2026
Author

And one more question for discussion.

Guys, what do you think, about this case? Maybe it's not only my problem and I will be able to send a PR with solution of this problem. Maybe it will be custom component and doc page about it or we can find more idiomatic way...

What do you think?

1 reply

alchemmist Jan 22, 2026
Author

@antfu, please, maybe you can orient my? Does the project need a PR with one or another solution to my problem?

Uh oh!

Exported PDFs missing local images in slide body #2433

Uh oh!

Uh oh!

alchemmist Jan 16, 2026

Replies: 6 comments · 5 replies

Uh oh!

GopalDose Jan 16, 2026

Root cause

✅ Solution 1 (Recommended): Remove the leading /

✅ Solution 2: Use Slidev’s built-in image layout (Most reliable)

More in documentation<MarkerX color="#5d3fd3" title="api" />

✅ Solution 3: Explicit relative path (Fallback)

Why --wait didn’t fix it

Uh oh!

Uh oh!

alchemmist Jan 17, 2026 Author

Uh oh!

GopalDose Jan 17, 2026

Why it still breaks (even with resolveAssetUrl)

The actually reliable way to embed body images for PDF

1️⃣ Import the image (this forces bundling)

2️⃣ Or use Markdown image syntax (simplest)

Uh oh!

alchemmist Jan 18, 2026 Author

Uh oh!

ismaildasci Jan 17, 2026

Uh oh!

alchemmist Jan 18, 2026 Author

Uh oh!

alchemmist Jan 18, 2026 Author

Uh oh!

Uh oh!

alchemmist Jan 18, 2026 Author

Uh oh!

alchemmist Jan 22, 2026 Author

Uh oh!

alchemmist Jan 18, 2026 Author

Uh oh!

alchemmist Jan 22, 2026 Author

alchemmist
Jan 16, 2026

Replies: 6 comments 5 replies

GopalDose
Jan 16, 2026

✅ Solution 1 (Recommended): Remove the leading `/`

✅ Solution 2: Use Slidev’s built-in `image` layout (Most reliable)

Why `--wait` didn’t fix it

alchemmist Jan 17, 2026
Author

GopalDose
Jan 17, 2026

Why it still breaks (even with `resolveAssetUrl`)

alchemmist Jan 18, 2026
Author

ismaildasci
Jan 17, 2026

alchemmist Jan 18, 2026
Author

alchemmist
Jan 18, 2026
Author

alchemmist
Jan 18, 2026
Author

alchemmist Jan 22, 2026
Author

alchemmist
Jan 18, 2026
Author

alchemmist Jan 22, 2026
Author