Troubleshooting broken images in bookdown hosted on gh-pages

[SBH]

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.

[jtbayly]

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:

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

[jdblischak]

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>

[SBH]

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.

[jdblischak]

@SBH

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

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

[SBH]

@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!