Images not exported in "export as HTML"

[stefanopagliari]

My intended workflow consists of preparing slides in Obsidian using this plugin, "exporting to html", and uploading to my website the folder exported by the plugin.

I've noticed that the images located inside the Obsidian vault that are embedded in the slides are not exported automatically. As a result, they are not visible online.

Is there a workaround besides manually copying and pasting the images from the Obsidian vault to the folder in which they are exported?

Thank you for your help

[ebullient]

I see this as well.

[MSzturc]

Please provide a sample Vault for this issue. By design all images should be exported as well

[kometenstaub]

I don't have a repro vault yet, but the error I see when exporting is that it is looking for the images at the vault root. It fails after the first image.

Uncaught (in promise) Error: ENOENT: no such file or directory, lstat '/Users/kometenstaub/Private/Vaults/Notes/mypicture.png'

I imagine the issue might be using the vault base path for embeds instead of the folder where the presentation is?

[stefanopagliari]

My images were stored in a subfolder folder on the root, not on the same folder as the presentation note. I've now moved the file to the same folder where the presentation note is located and it is exported correctly.

I woud prefer to keep all my images in a subfolder of the roote

[kometenstaub]

Even when my presentation is in the same folder as the pictures, the pictures don't get exported.

[MSzturc]

Yeah currently i use the base directory of the vault as root. This is needed since most of the ObsidianAPI calls use it as reference point for the vault.I've decided to use the Obsidian API and not the system API to be compatible with multiple operating systems out of the box. I plan to standardize advanced slides more and more to be able to use it on android or ios devices. Therefore i have to make a cut as boundary for the upcoming releases.

@stefanopagliari Did you tried to create a symlink in your vault that points to the image directory? And reference the Images through the symlink? Im not sure if it will work, since i didn't test is, but that would my first attempt for an workaround.

[kometenstaub]

I think symlinks only work to files external of obsidian.

[ebullient]

Yes.. this is the source of the issue. I also keep images elsewhere (and I have a lot of different slides in the same repo.. )

So, my image paths are like this: ../assets/img/profile/erin-devoxx-2022-tall.jpg, which shows up in the style like this:

element.style {
    background-image: url(../assets/img/profile/erin-devoxx-2022-tall.jpg);
}

Feels like the better starting path is the folder containing the presentation, as the preview renders correctly... OH! also, I think there is a better API you can use to resolve the image path: getFirstLinkpathDest(linkpath: string, sourcePath: string): TFile .. so if you pass the path we used, and the path of the presentation, things should resolve (according to our link settings).

[stefanopagliari]

@MSzturc the plugin seems to work fine now in exporting pictures that are located in a designated subfolder folder of the root. I'm not really sure what triggered this change but the issue is closed for me.

[MSzturc]

@stefanopagliari Good to hear ;-)

Yes.. this is the source of the issue. I also keep images elsewhere (and I have a lot of different slides in the same repo.. )

So, my image paths are like this: ../assets/img/profile/erin-devoxx-2022-tall.jpg, which shows up in the style like this:

element.style {
    background-image: url(../assets/img/profile/erin-devoxx-2022-tall.jpg);
}

Feels like the better starting path is the folder containing the presentation, as the preview renders correctly... OH! also, I think there is a better API you can use to resolve the image path: getFirstLinkpathDest(linkpath: string, sourcePath: string): TFile .. so if you pass the path we used, and the path of the presentation, things should resolve (according to our link settings).

I've designed the behaviour this because Obsidian has the option to save all media files in a central directory. I don't want to impose a workflow to the user so i've decide to give advanced slides the same image handling that obsidian has.

[kometenstaub]

I've designed the behaviour this because Obsidian has the option to save all media files in a central directory. I don't want to impose a workflow to the user so i've decide to give advanced slides the same image handling that obsidian has.

From a quick look at the code it looks as if it uses the base directory and doesn’t use the attachment directory though.

[kometenstaub]

The path for attachments would be this.app.vault.config.attachmentFolderPath. But I still think resolving the links like @ebullient said would be a better implementation because that is (I think) how Obsidian resolves the embeds itself when displaying them.

[qrkourier]

I would be happy to work around the issue if a way exists, but I haven't found any way to export the SVG I'm referring to in my slides. I tried putting the SVG in the same folder as the slides' note MD, and in a separate folder in the same vault.

When I export to HTML the slides are intact but the SVG is missing.

[qrkourier]

I noticed the Obsidian setting for placing attachments in the vault root was in effect when I was experiencing this issue.

I was finally able to export images with HTML by first organizing all files into a folder and changing the Markdown to reference the new relative paths within the folder.

[lenalebt]

I have the same issue. I have a rather lengthy presentation, rather a workshop that goes over multiple days. I organized single days in a folder, with images gong to a subfolder, like so:

.
├── Day1
│   └── img
├── Day2
│   └── img
├── Day3
│   └── img
├── Day4
│   └── img
├── Day5
│   └── img
├── img

The above is not in the root of the vault, because I organize my tasks around the workshop in obsidian as well.

To do so, I set these options in Obsidian:

Everything is fine in the preview, but no images in the export. The links in the export index.html are generated correctly, though - it's just that the files do not get copied.

[ybabel]

Same here. Images only work if in the root directory or subfolder of the root