image (from package) in html rmarkdown document breaks when published to Connect

[mfoos]

Hi folks,

I created a corporate template for rmarkdown for html and made it into a package, part of which is a jpg logo that lives way down inside the "inst" directory in the "skeleton" directory. When I first used it with Connect, it worked right out of the box, but at the time we were running a somewhat ancient Connect version (like, less than 1). We have since upgraded and are at 1.6.6.1. I had to create a local CRAN-like repo for my package, which mostly worked, except that the image renders as that "broken image" icon. I can't figure out what the image path needs to be in the document to point at it correctly. Before it worked to just use the image name. I have tried the full path to the skeleton dir, and I have tried the "resource_files" in the YAML. If anyone can point me in the right direction, I'd be grateful!

[cole]

When the package is installed, I believe things in the inst directory get moved into the parent directory? Or something like that. My recommendation would be to test locally with what the path looks like to an installed package and, also, to use the following as a reference to the filepath:

system.file("DESCRIPTION", package = "base")
system.file("./inst/blah", package = "mypackage")

In particular, it is often easier to wrap this in a function for your users:

mypackage::my_package_image <- function() {
  system.file("./path/when/installed", package = "mypackage")
}

I think this reading might be helpful for you:
http://r-pkgs.had.co.nz/inst.html

EDIT: I imagine it is discouraging to have things not working in your new approach, but I do want to encourage you that you are actually taking the right approach now. Putting these things in a package and setting up a repository is the right way to go. If managing the repository becomes a burden, you might look at RStudio Package Manager, which is a supported approach to managing such repositories.

[mara]

Edit: these are all LaTeX output, so the analogy makes no sense…

---

I'm going to try this as well, but since it's hard to predict what happens on two different machines/stacks, have you tried using a template with a logo image from another package, such as rticles?

I'm looking at the structure, and it looks like exactly what you're describing/what's described in the RMarkdown document templates - Supporting files section.

17.2 Supporting files | R Markdown: The Definitive Guide

But, I'd be curious if you get the same result on your setup.

[mfoos]

Dangit, I tried sooo hard to include all the info but still forgot: When I knit it locally, the image works, but when I run it like a notebook (Run All chunks) the image doesn't work.

Also I'm using htmltools::img().

Anyway, I'll give the system.file version a look, I think I saw that in my googling as well. It's just a quirk of mine that fixing things without understanding why they don't work keeps me up at night.

Incidentally, I created the repo because the deployment straight-up failed at packrat stage because it couldn't find my package on CRAN - if there is another workaround for that I'd be curious to hear it, because I know now all my users will be motivated to jump through that hoop.

thank you!

[mfoos]

trying that repo may not make sense, but thank you for this post because it made me realize that my using htmltools::img may be part of the problem/solution

[mfoos]

The system.file() wrap did not work and broke the image in the locally-knit document where it had worked earlier. EDIT: system.file() did not actually break the image locally, I had a typo. It alone did not solve the overarching HTML problem though.

The code that's creating the problem is:

footer <- function () {
return(tagList(htmltools::img(src = system.file("./rmarkdown/templates/report/skeleton/Logo_SmallScale_rgb.jpg",
package = "Company"), alt = "logo", width = "200px", style = "position:absolute; top:0; right:0; padding:10px;"),
htmltools::p(paste0("Last updated: ", Sys.Date())), htmltools::div(id = "footer",
p(id = "foottext", "Company | Confidential and Proprietary"))))
}

footer()

R 3.5.1
htmltools 0.3.6
rmarkdown 1.10
knitr 1.20

[cole]

Sorry for the late response here. On this item:

I created the repo because the deployment straight-up failed at packrat stage because it couldn't find my package on CRAN - if there is another workaround for that I'd be curious to hear it, because I know now all my users will be motivated to jump through that hoop.

Setting up a package repository is the recommended solution here. Understandably annoying to do that work, but that is where Package Manager is intended to live as a complementary product and make managing packages easier. You can use external packages as a workaround, but that is really intended for another purpose, and has the side effect of making all content use the same version of the package (which is problematic for breaking changes, etc.).

As for your image issues, the problem here is that you are referencing a file path within your HTML (and within your browser). While this may work locally (i.e. you can refer to files in your browser with things like file:///path/to/thing), it will definitely not work on any remote server (i.e. Connect) because your desktop does not have access to the files stored on the Connect server.

The way you need to do this is to actually shove the image itself into your HTML or otherwise expose it to the client (i.e. on a webserver where it can be accessed with a http address). The easiest way to do this is definitely within RMarkdown. You can do it pretty natively with the ![caption](path/to/image) convention, or in R code. An example below (using the jpeg package because it was the first I found with an image in it )

```{r setup, include=FALSE}
library(jpeg)
library(htmltools)
```

![Caption](`r system.file("img/Rlogo.jpg", package = "jpeg")`)\

```{r func}

the_img <- knitr::image_uri(system.file("img/Rlogo.jpg", package = "jpeg"))

    footer <- function () {
    return(tagList(htmltools::img(src = the_img, alt = "logo", width = "200px", style = "position:absolute; top:0; right:0; padding:10px;"),
    htmltools::p(paste0("Last updated: ", Sys.Date())), htmltools::div(id = "footer",
    p(id = "foottext", "Company | Confidential and Proprietary"))))
    }

    footer()
```

[mfoos]

Thanks for the update! Using image_uri indeed solved the problem! I think it was harder to troubleshoot than it should have been because it "used to work" without image_uri (and the document I published that way in September is still working) but it turns out I had configured that differently. I guess the moral of the story is don't live in the past?

[cole]

That's a weird one! Definitely feel free to share how you configured the other one differently, if it's profitable. If your question is solved, it's probably worth marking a solution as well, just so others can quickly find the resolution in case they run across a similar problem.

I would say that's a valid moral Along with "don't use on-disk file references in the browser" But that one is a tough one to discern sometimes because of how seamless R Markdown makes the transition from "R code" to "HTML." To that end, if you open the devtools in your browser (i.e. in chrome), it allows you to more easily see and explore what is making it into the rendered HTML.

[mfoos]

The mortifying truth is that the alternate "configuration" is that it was before I'd packaged the template and it was just an image.