Hugo / Blogdown Images Fail to Render After GitHub/Netlify Deployment

[anttirask]

Hi, this is my first time asking a question, so apologies in advance if I do something stupid.

I made my third blogpost with blogdown. I've used images on the first two and everything went well, but this was the first one where the images were created by R code:

png_1 <- image_read_pdf("index_files/pdf_with_image_1.pdf")

print(png_1)

This created a new folder and the path looks like this:

\content\post\2021-06-05-mining-text-from-pdf-files-part-3-pdf-with-an-image\index_files\figure-html\

The images themselves are named in this manner: unnamed-chunk-4-1.png

After finishing writing the post I made the usual Git/GitHub ritual and Netlify seemed to deploy the post normally.

However, this is what it looks like on the website:

I tried to read about similar problems on GitHub and even here, but I didn't find a straightforward answer to the problem.

This is what the html code looks like (I'm a new user, so I couldn't embed another image):

img src="{{< blogdown/postref >}}index_files/figure-html/unnamed-chunk-4-1.png" width="1650"

I can provide more information if needed. Thank you!

Antti

ps. I have presented the same problem on StackOverflow as well.

[cderv]

Can you try running the new checking function and see if everything is ok on your end ?

Posit

That would help

[anttirask]

Thanks @cderv,

Here are the checks:

blogdown::check_config()
― Checking config.yaml
| Checking "baseURL" setting for Hugo...
○ Found baseURL = "https://youcanbeapirate.netlify.com/"; nothing to do here!
| Checking "ignoreFiles" setting for Hugo...
○ "ignoreFiles" looks good - nothing to do here!
| Checking setting for Hugo's Markdown renderer...
○ All set! Found the "unsafe" setting for goldmark.
― Check complete: config.yaml

blogdown::check_gitignore()
― Checking .gitignore
| Checking for items to remove...
○ Nothing to see here - found no items to remove.
| Checking for items to change...
○ Nothing to see here - found no items to change.
| Checking for items you can safely ignore...
○ Found! You have safely ignored: Thumbs.db, .DS_Store
| Checking for items to ignore if you build the site on Netlify...
○ Found! You have safely ignored: /resources/, /public/
| Checking for files required by blogdown but not committed...
○ Great! Did not find such files.
― Check complete: .gitignore

blogdown::check_hugo()
― Checking Hugo
| Checking Hugo version...
○ Found Hugo. You are using Hugo 0.83.1.
| Checking .Rprofile for Hugo version used by blogdown...
○ blogdown is using Hugo 0.83.1 to build site locally.
● [TODO] Also run blogdown::check_netlify() to check for possible problems with Hugo and Netlify.
― Check complete: Hugo

blogdown::check_netlify()
― Checking netlify.toml...
○ Found HUGO_VERSION = 0.83.1 in [build] context of netlify.toml.
| Checking that Netlify & local Hugo versions match...
○ It's a match! Blogdown and Netlify are using the same Hugo version (0.83.1).
| Checking that Netlify & local Hugo publish directories match...
○ Good to go - blogdown and Netlify are using the same publish directory: public
― Check complete: netlify.toml

blogdown::check_content()
― Checking content files
| Checking for validity of YAML metadata in posts...
○ All YAML metadata appears to be syntactically valid.
| Checking for previewed content that will not be published...
○ Found 0 files with future publish dates.
○ Found 0 files marked as drafts.
| Checking your R Markdown content...
○ All R Markdown files have been knitted.
○ All R Markdown output files are up to date with their source files.
| Checking for .html/.md files to clean up...
○ Found 0 duplicate .html output files.
○ Found 0 incompatible .html files to clean up.
| Checking for the unnecessary 'content/' directory in theme...
○ Great! Your theme does not contain the content/ directory.
― Check complete: Content

[anttirask]

Also, the GitHub repo, if that would provide any useful extra information.

[francisco_piccolo]

Hello,

I'm facing the same issue. Tried a lot of different stuff but the images still doesn't appear after serving the site on Netlify.

I've posted the issue on stack: r - Blogdown Site not showing my Images after deploying on Netlify - Stack Overflow