Troubleshooting broken images in bookdown hosted on gh-pages

Hi everyone,

I'm having some issues getting image content to render on a bookdown site that we've been developing. The image paths appear to be correct, but the images aren't showing up on the rendered document.

I've been hosting this document on a gh-pages branch that's built with Travis. PNGs are stored within a folder called /images, and figures generated with R code and knitr are stored in _main_files/figure_html/.... I've tried changing the output directory for these figures to main_files (i.e. remove the first underscore) without success.

Has anyone encountered this before? Any insights would be greatly appreciated.

The github repository can be found here.

There's something wrong with that directory somehow. Not sure what, but this image loads just fine:
'https://noaa-edab.github.io/tech-doc/images/EPUs.jpg'

This image doesn't:
'https://noaa-edab.github.io/tech-doc/_main_files/figure-html/bennet-plot1-1.png'

It looks to me like GitHub pages doesn't want to serve images from that folder for some reason. One possible clue is that when you hover over the folder those non-loading images are in on the GitHub site, it has this tooltip:
59%20PM

But since the /images folder works just fine, can't you just put the images in there?

1 Like

I investigated the image images/journal.pone.0146756.g002.PNG that is referenced in index.html. In at least this instance, the issue to seems to be the case of the file extension. The file contains the line:

<p><img src="images/journal.pone.0146756.g002.png" style="display: block; margin: auto;" /></p>

Note that the file extension is lower case. When I cloned your repository to my Ubuntu machine, I was able to get that particular file to display by changing the file extension to upper case:

<p><img src="images/journal.pone.0146756.g002.PNG" style="display: block; margin: auto;" /></p>
1 Like

Thanks @jdblischak and @jtbayly. I'll try to change the output directory for figures produced in R to images/ and see if that works.

Interesting that changing ".png" to ".PNG" somehow triggered the image to render.

1 Like

The filesystem on Linux is case-sensitive. This is in contrast to Windows or macOS, which have case-insensitive filesystems.

1 Like

@jdblischak @jtbayly it worked! I sent the R figures to images/ and fixed paths to imported images that were mistakenly written as .png when the files were written as .PNG. Thanks so much for your help!

2 Likes

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.