Embedding HTML generated by an R function
P粉513316221
P粉513316221 2024-04-01 20:51:51
0
1
509

I want to dynamically build html and render that html In quarto. The actual application involves inserting an iFrame, But to keep it simple, let's just create an <img> tag.

This is my .qmd code:

```{r}
source("awash-functions.r")
```

How do you inject html text produced in an r function into a **quarto** document? 
In R markdown, I had the function `sprintf` a string. That doesn't seem to work here!

Here is `awash-functions.r`:

    imageLink <- function(iUrl, iText) {
      sprintf("<img src = '%s' width='24'>&emsp;%s", iUrl, iText)
    }

let's call the function and see what appears:

```{r echo=FALSE}
imageLink("https://www.united.com/8cd8323f017505df6908afc0b72b4925.svg", "united logo")
```

and now, here's what it's supposed to look like:

<img src = 'https://www.united.com/8cd8323f017505df6908afc0b72b4925.svg'>&emsp;united logo

It renders and the function is obviously called, But it shows the html code instead of the image:

I know this is simple but I can't find it. Thank you so much!

P粉513316221
P粉513316221

reply all(1)
P粉883973481

There are two points to note:

  • First, Quarto wraps any code block output in

     tag. To get the output asis you need to use the chunk option results: asis.

  • Secondly, sprintf (or even print) returns output enclosed within quotes. So after using results: asis, you would get the html tags but would also get the quotes. So you need to wrap the sprintf with cat to get intended results.

---
format: html
---

```{r}
#| echo: false
imageLink  %s", iUrl, iText))
}
```

```{r}
#| echo: false
#| results: asis
imageLink("https://www.united.com/8cd8323f017505df6908afc0b72b4925.svg", "united logo")
```

and now, here's what it's supposed to look like:

 united logo
by default
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template