Linking to images in same directory with Markdown?

[achamess]

Hi. I'd like to link to image files that I keep in the same directory as my .Rmd file.
With .Rmd on my computer the images render fine.

For example

Experiment 1 (Parent DIrectory)

• Exp1.Rmd
• IMG1.jpg
• IMG2.jpg

Then, in my .Rmd doc, I'll make an image link:

![Image1](IMG1.jpg)

And this renders well on my desktop. But using blogdown::serve(), the images are broken. I figure this has something to do with how Hugo handles images. Image files can't be in the same directory as the .Rmd files? I see that for the figure files that are generated from the .Rmd internally (plots, etc.), the files go into a figure-html directory automatically. But for the straight external images that I keep bundled in the .Rmd parent directory, they don't show.

Is there a fix for this?

[achamess]

Looking a little deeper, I see now what bookdown is doing. When code is executed in the .Rmd and it makes some kind of plot or figure, in the static folder, the plot figures are created and placed in a directory. At the same time, those same figures are also in the public directory under the Experiment 1 folder. So it seems like the way you get the figs to render is by making copies in the static folder. Could you also do the same with other static assets (images, files, etc.) that are housed in the .Rmd parent directory (Experiment 1)?

[yihui]

Your understanding is absolutely correct. I admit it can be counterintuitive, but it is how Hugo works. I made special treatments to plots generated from R code chunks (move them to static/), and I was conservative about other files.

In general, static files should be put under the static/ directory. I have mentioned this in the first paragraph in this section: https://bookdown.org/yihui/blogdown/static-files.html

[achamess]

Thanks for the answer. I'm trying to use the combination of R Markdown files + Hugo for a wet lab notebook. Thus, I need/want to link to image files. I know I could keep them in the s/static folder, but I don't like separating data. Just as for data analysis, I find it best to keep everything that goes together (an experiment) in one folder. Do you think it's possible to do the same as you did with R figures for other images?

[yihui]

I don't have a good solution, but putting the images under foo_files/figure-html/ probably works where foo is the basename of your Rmd file (without the .Rmd extension).

[achamess]

FYI. This works now. As of Hugo v0.32. https://gohugo.io/news/0.32-relnotes/ <https://gohugo.io/news/0.32-relnotes/> https://discourse.gohugo.io/t/keep-images-content-together/51/30 <https://discourse.gohugo.io/t/keep-images-content-together/51/30> I just tried it out. I made regular markdown links in an .Rmd file. `[Von Frey Data 2017-12-02](/notebook/Experiment1/von-frey-2017-12-01.jpg)` Notice though that I had to write out the full link from root, not just the file name, even though it lives in the same folder. When I built the site with `blogdown::build_site()` and served the site from the terminal, the image was there. Looked good!

…

On Jan 2, 2018, at 11:22 AM, Yihui Xie ***@***.***> wrote: I don't have a good solution, but putting the images under foo_files/figure-html/ probably works where foo is the basename of your Rmd file (without the .Rmd extension). — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#239 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AHGbcgbx2rSbSnZKRI8CAT3bE3xeZbAsks5tGlfMgaJpZM4RPs-A>.

[yihui]

Great! Thanks for posting back!

[taraskaduk]

Thanks @achamess!

I'm sorry, I can't get this to work. Updated Hugo, but no luck.

Just to clarify, should my path now be like
/mysite/content/post/blogpost_folder/image.png ?

blogpost_folder is a hypothetical folder where I keep all files related to the post (images, .Rmd, the .Rproj file, the whole nine yards)

[taraskaduk]

I got it! Looks like it works for me too! Woo-hoo! Yass! IT WORKS!

The start of the path would be not /content or /public, but one level down (so for regular posts, would be something like /blog or /post)

[sarahsalter]

Hi there! I have a related, but different question. I am trying to use internal hyperlinks within my blog. But rather than linking images, I am trying to link text to different text in a different section of the document. For instance, I created a blog post that defines some functions in the beginning of the document, and I wanted to link those function names to the portion of the document that I give examples of the specific function. It works great when I knit the Rmd; however, it stops working once the blog is posted. If anyone could provide any suggestions or resources I would really appreciate it! Thank you!!