Again: Shinylive with renderImage() & new base64 Quarto extension

[petzi53]

I just learned that there is a new Quarto extension by @grrrck(Profile - grrrck - Posit Community) to facilitate working with pre-rendered images with shinylive in Quarto documents. See here.

I tried to use it, but I encountered a problem:

Using it, I get the error messages

jsonlite::base64_dec(file$content) : Error in base64 decode.

However, if the image is very small, the page will still be rendered. But with a larger image, or another image, or even another empty shinylive-r code chunk, the rendering process stops, and further processing is suspended. RStudio remains in "background Job" and never returns to the console.

However, images referenced with the base64-data macro included in the Quarto document appear correctly after the rendering process. I tested it with various image formats (PNG, JPG, small, and large images).

I used the following test scenario:

library(shiny)

ui <- fluidPage(
    selectInput("pict", "Pick a logo", choices =
                    c("Quarto" = "quarto",
                        "Shiny" = "shiny"
                      )
                ),
    imageOutput("logo")
)

server <- function(input, output, session) {
    output$logo <- renderImage({
        list(
            src = file.path(paste0(input$pict, ".png")),
            contentType = "image/png",
            width = 240,
            height = 277
        )
    }, deleteFile = FALSE)
}

shinyApp(ui, server)
#> 
#> Listening on http://127.0.0.1:4758

^{Created on 2025-06-27 with reprex v2.1.1}

The app.R version is working fine. The images are displayed correctly.

The second part of my test scenario is a .qmd file with the following content:

---
title: "Test base64 Quarto extension"
format: html
filters: 
    - shinylive
    - base64
---


## Example renderImage() doc


```{shinylive-r}
#| standalone: true
#| viewerHeight: 550
#| components: [editor, viewer]

## file: app.R
{{< include app.R >}}

## file: quarto.png
## type: binary
{{< base64 quarto.png "image/png" >}}


```

(It wasn't clear to me if I still needed the line ## type: binary, but without it, it didn't work for me in all the different constellations I tried. With ## type: binary, the shinylive code chunk in the webpage showed the number of bytes of the image file and not a gibberish of letters.)

And now the result:

1. The Quarto logo appears despite the error message. Each image called with base64 results in a separate error message.
2. If you change the order of the logoi or add another image, then the rendering process gets stuck after the error messages with the two lines:

Loading metadata database
✔ Loading metadata database ... done

I am using macOS 15.5, RStudio Version 2025.05.0+496 (2025.05.0+496). And here are my quarto check results

Quarto 1.8.4
[✓] Checking environment information...
Quarto cache location: /Users/petzi/Library/Caches/quarto
[✓] Checking versions of quarto binary dependencies...
Pandoc version 3.6.3: OK
Dart Sass version 1.87.0: OK
Deno version 2.3.1: OK
Typst version 0.13.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
Version: 1.8.4
Path: /Applications/quarto/bin

[✓] Checking tools....................OK
TinyTeX: (not installed)
Chromium: (not installed)

[✓] Checking LaTeX....................OK
Using: Installation From Path
Path: /Library/TeX/texbin
Version: 2025

[✓] Checking Chrome Headless....................OK
Using: Chrome found on system
Path: /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
Source: MacOS known location

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
Version: 3.10.9 (Conda)
Path: /Users/petzi/anaconda3/bin/python
Jupyter: 5.2.0
Kernels: python3

[✓] Checking Jupyter engine render....OK

(-) Checking R installation...........R version 4.5.1 (2025-06-13)
[✓] Checking R installation...........OK
Version: 4.5.1
Path: /Library/Frameworks/R.framework/Resources
LibPaths:
- /Library/Frameworks/R.framework/Versions/4.5-arm64/library
- /Library/Frameworks/R.framework/Versions/4.5-arm64/Resources/library
knitr: 1.50
rmarkdown: 2.29

[✓] Checking Knitr engine render......OK

[grrrck]

The error about jsonlite::base64_dec() likely harmless (although I'll report this separately).

It turns out that my extension was including the base64-encoded string all on one very long line. For some reason, something in the pipeline really doesn't like that. I just pushed an update that wraps the base64 encoded strings at 76 characters wide and I can now render your example quickly.

Try updating with

quarto add gadenbuie/quarto-base64

and let me know how it goes.

Also note that you're missing the shiny.png file in the shinylive chunk. Here's the qmd I was using to test:

---
title: "Test base64 Quarto extension"
format: html
filters:
    - shinylive
    - base64
---

## Example renderImage() doc


```{shinylive-r}
#| standalone: true
#| viewerHeight: 550
#| components: [editor, viewer]

## file: app.R
{{< include app.R >}}

## file: quarto.png
## type: binary
{{< base64 quarto.png >}}

## file: shiny.png
## type: binary
{{< base64 shiny.png >}}
```

Reported the jsonlite error at: Error in `jsonlite::base64_dec(file$content)` when using shortcode to include files · Issue #159 · posit-dev/r-shinylive · GitHub
And tracked quarto-base64 at: Very slow to base64 encode images · Issue #1 · gadenbuie/quarto-base64 · GitHub

[petzi53]

Works like a charm! Thank you!

Although I got the mentioned error message(s) about jsonlite::base64_dec(file$content), the rendering process did not stop, and shinylive had no problems loading the images. I tried it even with a much bigger picture (1228626 bytes of binary data), but still did not encounter any issues.

You are right: I omitted shiny.png because I thought (and still think) that to test the functionality of your extension, the first selected image that would be served by inputSelect() would be enough.