image element from function not rendering

[MayaGans]

Hello!

I'm having trouble rendering an image when I use the file location as a function argument, but using the same path directly from within the document (the sanity check) works?

This reprex assumes you put an image inside inst/img called demo.png. I used a free photo from this website: https://www.pexels.com/search/nature/

---
title: "Untitled"
---

<style>
.img-container {
   height: 300px;
   width: 300px;
}
</style>

# Calling image location from a function

```{r}
img_div <- function(src) {
   htmltools::tags$div(
   class="img-container",
   style=sprintf("background-image:url('%s');", src)
   )
}

img_div("inst/img/demo.jpg")
```

# Sanity Check 

I can see the image here, meaning quarto "knows" that this path exists. 

![](inst/img/demo.jpg)

Is there a way to require assets in the YAML of the file maybe to force having those assets show up? Please note - the image I'm actually using on my site is not hosted on a website, so simply using the image's URL will not work in my use case.

[MayaGans]

Sorry - the R chunk should end after img_div("inst/img/demo.jpg") but I wasnt sure how to literally end the chunk in markdown 🤦‍♀️

[mcanouil]

You can share a Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).

````qmd
---
title: "Reproducible Quarto Document"
format: html
---

This is a reproducible Quarto document using `format: html`.
It is written in Markdown and contains embedded R code.
When you run the code, it will produce a plot.

```{r}
plot(cars)
```

The end.
````

[mcanouil]

Any reason to not do?

::: {.img-container style="background-image:url('inst/img/demo.jpg')"}
::: 

Prefer avoiding setting raw HTML inside the document without telling it's raw content.
And in this case, there is Easter the css key or use include-*.

include-in-header:
  - text: |
      <style>
      .img-container {
         height: 300px;
         width: 300px;
      }
      </style>

[MayaGans]

Hi @mcanouil first of all thanks for your notes and ideas! I put my CSS in a file but just included it inline for the purpose of this reprex but thats good to know for the future!!

My use case will be mapping over a bunch of images in a directory so I'd like to avoid calling each one manually in the document if I can, I just kept it to one for the simplicity of the reprex and am also just generally curious why this approach doesn't work

[mcanouil]

I currently don't have access to a laptop, thus my answer about the usual Pandoc/Quarto syntax.

Meantime, I'm out can add keep-md: true to see what your cell's output is.
A possibility is that you need #| output: asis.

Note that a cat(sprintf(...)) and the option mentioned above using the fenced div syntax should work and across formats (ignored in pdf/docx actually)

[cderv]

@MayaGans Which Quarto version are you using ? Are you working in a project ?

Is there a way to require assets in the YAML of the file maybe to force having those assets show up?

Website projects have a way to specify some resource that may not be found automatically by Quarto using the resources: key (https://quarto.org/docs/websites/website-tools.html#site-resources). I believe we probably are not looking into some CSS specified on a div to know which resource to include.

So try add in your YAML

resources: 
  - inst/img/*

My use case will be mapping over a bunch of images in a directory so I'd like to avoid calling each one manually in the document if I can

If you are using knitr could also have a function that writes raw Markdown ? knitr::includes_graphics() can probably be used, or it is easy enough to do the same

```{r}
#| include: false
insert_img <- function(src, cap = "") {
  sprintf("![%s](%s)", cap, src)
}
```

`r insert_img("inst/img/demo.png")`

Hope it helps

[MayaGans]

This is perfect thank you!