Easily embed base64 encoded files in your Quarto documents.
Why would you want to do this? If you’re using the shinylive Quarto
extension, you can use the
base64
shortcode to embed binary files in your Shinylive apps.
If you aren’t using Shinylive, pandoc can help you embed images in your
documents via --embed-resources
(or embed-resources: true
in
Quarto). But this applies to all images and resources in your document.
If you find yourself wanting to embed a single image or resource: the
base64-data
shortcode can help!
quarto add gadenbuie/quarto-base64
This will install the extension under the _extensions
subdirectory. If
you’re using version control, you will want to check in this directory.
To encode a file into a base64 string, use the base64
shortcode.
```{shinylive-python}
#| standalone: true
#| components: [editor, viewer]
#| layout: vertical
## file: app.py
from pathlib import Path
from shiny.express import render, ui
@render.ui
def image():
return ui.img(src="photo.png")
## file: www/photo.png
## type: binary
{{< base64 photo.png >}}
```
To encode a file into a base64 data URI, use the base64-data
shortcode.
![]({{< base64-data photo.png >}})
The base64-data
shortcode will automatically guess the MIME type of
the
file
using the puremagic Lua module. If
it guesses wrong, or can’t determine the MIME type, you can specify the
MIME type explicitly.
![]({{< base64-data photo.png "image/png" >}})
{{< base64 photo.png >}}
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
<img src="{{< base64-data photo.png >}}">