Article external image paths not converted properly

[adamsma]

This may be related to #1472, but the assets are being copied properly. The paths to the images appear to be not converted properly. I created a repo with sample files of the issue, but I'll also list the steps to recreate it at the end.

Issue summary: I'm trying to create a pkgdown site. My README and vignettes have external figures (i.e. images not created via R code). For the README, the external files are stored in man/figures/ per the build_home documentation. For the vignettes, the external files are located in vignettes/ and are identified by rmarkdown::find_external_resources(). Both the vignette and README build properly for the package. The README is rendered correctly for the home page of the pkgdown site, but the articles created from the vignettes have broken links to the external files (example).

The image is copied to docs/articles but the src attribute wasn't adjusted properly. Whereas for the README/home it's changed to reference/figures/README/image.png, in the vignette/article it is converted to a some what convoluted relative path back to the vignette folder (which doesn't work even on my local computer). It is src="../../../../Documents/Scripting/pkgdownReprex/vignettes/image.png" instead of presumably image.png.

Here is my sessionInfo:

R version 4.0.3 (2020-10-10)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows 10 x64 (build 18363)

Matrix products: default

locale:
[1] LC_COLLATE=English_United States.1252  LC_CTYPE=English_United States.1252   
[3] LC_MONETARY=English_United States.1252 LC_NUMERIC=C                          
[5] LC_TIME=English_United States.1252    

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

loaded via a namespace (and not attached):
 [1] jquerylib_0.1.3   bslib_0.2.4       highr_0.8         pillar_1.5.1      compiler_4.0.3    remotes_2.3.0    
 [7] prettyunits_1.1.1 tools_4.0.3       sys_3.4           testthat_3.0.2    pkgload_1.2.0     digest_0.6.27    
[13] pkgbuild_1.2.0    jsonlite_1.7.2    evaluate_0.14     memoise_2.0.0     lifecycle_1.0.0   tibble_3.1.0     
[19] debugme_1.1.0     pkgconfig_2.0.3   rlang_0.4.10      reprex_1.0.0      cli_2.4.0         rstudioapi_0.13  
[25] yaml_2.2.1        pkgdown_1.6.1     xfun_0.22         fastmap_1.1.0     withr_2.4.1       knitr_1.31       
[31] sass_0.3.1        desc_1.3.0        fs_1.5.0          vctrs_0.3.6       askpass_1.1       devtools_2.3.2   
[37] rprojroot_2.0.2   gert_1.2.0        glue_1.4.2        R6_2.5.0          processx_3.5.1    fansi_0.4.2      
[43] rmarkdown_2.7     sessioninfo_1.1.1 clipr_0.7.1       callr_3.6.0       purrr_0.3.4       magrittr_2.0.1   
[49] whisker_0.4       ps_1.6.0          credentials_1.3.0 ellipsis_0.3.1    htmltools_0.5.1.1 usethis_2.0.1    
[55] rsconnect_0.8.16  utf8_1.1.4        openssl_1.4.3     cachem_1.0.4      crayon_1.4.1   

I managed to snag the temp test.utf8.md that gets fed into pandoc. The path is still listed as just "image.png" so the resolving the path is happening sometime after that.

If there isn't a way to correct the auto-translating of the src path, is there a way to force pkgdown to use embedded images similar to the html_vignette format (i.e. what's produced by devtools::build_vignettes)?

---

Steps to create the sample repo:

dir.create("No No Dir")
usethis::create_package(file.path("No No Dir", "pkgdownReprex"))
usethis::use_git() # accept for both prompts
dir.create("man/figures/README", recursive = TRUE)
picUrl <- "https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png"
download.file(picUrl, file.path("man", "figures", "README", "image.png"), mode = "wb")
usethis::use_readme_rmd()

Then edit the README to be this

devtools::build_readme()
usethis::use_vignette("test", "Test Vignette")

Then edit test.Rmd to be this.

download.file(picUrl, file.path("vignettes", "image.png"), mode = "wb")
devtools::build_vignettes()
usethis::use_pkgdown()
pkgdown::build_site()

End result is this site

[hadley]

Are you using the development version of pkgdown? (In general, supplying sessionInfo() is not that useful because I have to wade through an unordered list of package names to find out what's actually important. There's no need to provide it unless we specifically ask).

[adamsma]

I was trying to make less work, but seems I veered in the wrong direction. My apologies. Noted for future issue submissions.

I'm using the latest CRAN version of pkgdown (1.6.1). Our IT makes it difficult to install dev versions of packages. Reading through the NEWS, I didn't see anything that seemed related, but obviously you would know best. If you think there's something in there that might solve this, I can try to get it installed (certainly can try on my personal machine if nothing else).

[adamsma]

It appears the issue is caused by a space in the working directory path. I'll modify the steps to reproduce above to capture this. By adding a directory into the path with a space in the name, I could reproduce it on a separate machine. Removing the space and rebuilding had the path converted correctly. Unfortunately, I have less freedom remove spaces from the path on my work computer.

As a side note, I noticed that when a broken link is created, it is only off by an additional parent directory reference. I.e., if I previewed the site and manually edited the src attribute in the article by prepending a ../ to it, the link was valid. This isn't really a viable solution as (besides the manual editing) it will be pointing to a non-existent directly when uploading to GH, Netlify, etc.. Just an observation.

[hadley]

Reading through this again, I'm pretty sure this is just the same case as #1472, or at least will be fixed when I ensure that you can use figures in man/figures in your articles/vignettes.