Images not showing up when exporting to SVG or PNG on play.d2lang.

[tcaky]

Edit: I am on Windows, using Firefox if it makes a difference for the issue.

Simple sequence diagram:

vars: {
  d2-config: {
    layout-engine: elk
    # Terminal theme code
    theme-id: 300
  }
}

push_model: Push Model {
  shape: sequence_diagram
  github: "GitHub Action" {
    shape: image
    icon: https://icons.terrastruct.com/dev%2Fgithub.svg
  }
  gcp_artifact_registry: "Artifact Registry" {
    shape: image
    icon: https://raw.githubusercontent.com/tcaky/WikiMeThis/main/media/google-cloud-icons/artifact_registry/artifact_registry.svg
  }
  gcp_cloud_run: "Cloud Run" {
    shape: image
    icon: https://icons.terrastruct.com/gcp%2FProducts%20and%20services%2FCompute%2FCloud%20Run.svg
  }
  # github."Credentials stored in GitHub for use by actions to push to GCP"
  github -> github: Detect change to\nbranch being monitored
  github -> github: Build container
  github -> gcp_artifact_registry: Update image in registry
  github -> gcp_cloud_run: Push new image
}

When I export the above, the images are not being added to either the PNG or SVG outputs.

[bo-ku-ra]

on windows, svg export is fine but png has no icons. https://github.com/terrastruct/d2/issues/1983#issuecomment-2190215837

[hoospacekor]

Facing the same issue, I'm using chromeOS, Chrome. I tried unify image format with svg as I was using both png and svg but still didn't work.

[lovette]

I've had this issue for years and every now and then I spend a few hours trying to find a solution. Chrome doesn't even make a request for the icons referenced in my exported .svg 🤨 Today, thinking it could be related to CORS somehow, I downloaded the .svg for all the icons so there are no cross-site requests. No matter what I try, the icons are visible on the playground but not when I open a page that references the exported .svg. It's the same result whether served locally (via mkdocs) or through Cloudflare Pages.

[bo-ku-ra]

i tried it on windows edge, now. no problem. is chrome's security policy cased? (CORS?)

[lovette]

I forgot to mention, that I have the same problem in Safari. Late last night it occurred to me that I hadn't tried opening the .svg directly. That worked! All the icons are shown.

The solution is to change this (which mkdocs generates):

<img src="/images/pods.svg" />

To this:

<object type="image/svg+xml" data="/images/pods.svg"></object>

If only I had thought of this two years ago 🙄

@bo-ku-ra as you mention above, my icons do not appear in the exported .png either, but I suspect that's an issue on the Playground backend.

[bo-ku-ra]

"<object>" uses the svg's own path. (ex. pods.svg) "<img>" uses the path of the caller's file. (ex. index.html) i think that d2 should use "<object>".

root/
  ├ index.html
  └ svg/
     ├ pods.svg
     └ images/
        └ foobar.png

pods.svg (the caller is index.html)

<img src="svg/images/foobar.png"/> is correct. <object type="image/svg+xml" data="/images/foobar.png"></object> is correct.

[alixander]

fixed by fetching and encoding the images to base64 through proxy

png export: