The source repository of this website can be found on GitHub.

The problem described on this website is also documented as an issue on the quarto-cli GitHub repository.

Problem

Quarto HTML document does not display image downloaded from a publicly accessible cloud share provider (here: Keeper).

Example

Here is the link to the Keeper logo: https://keeper.mpdl.mpg.de/media/custom/KeeperLogo.svg

I can embed it in Markdown using the ![]() Markdown syntax:

![](https://keeper.mpdl.mpg.de/media/custom/KeeperLogo.svg)

Here is the link to the same logo, stored in a Keeper library: https://keeper.mpdl.mpg.de/f/ec510a79d3ab495eaf67/

Again, I want to embed it in Markdown using the direct download link:

![](https://keeper.mpdl.mpg.de/f/ec510a79d3ab495eaf67/?dl=1)

Can you see the logo?

No, right?

But the same thing works for the README.md on GitHub …

Keeper Image

… and also for the link provided to the image field in the YAML header when using the About Pages template.

Why?

Workaround: Pre-render

One workaround is to execute a script that downloads images from the cloud storage as part of the pre-render options in Quarto.

Here is one approach:

  1. We create a Makefile command prepare that uses wget to download the image from Keeper:
prepare:
  wget https://keeper.mpdl.mpg.de/f/ec510a79d3ab495eaf67/?dl=1 -O KeeperLogo.svg
  1. We include pre-render: make prepare in _quarto.yml

  2. We include a path to the downloaded file:

![](KeeperLogo.svg)

This is the outcome:

Cool! 🎉