Add an image to Rmarkdown output (to bookdown) before top level heading

[MBN]

Is it possible to put an image above a top level heading? The example below has the same code chunk to display an image above and below the top level heading, but the image doesn't appear above the top level heading.

---
output: html_document
---

```{r echo=FALSE, message=FALSE, warning=FALSE}
library(imager)
im <- load.image(system.file('extdata/Leonardo_Birds.jpg',package='imager'))
plot(im, axes=FALSE)
```

# R Markdown

```{r echo=FALSE, message=FALSE, warning=FALSE}
library(imager)
im <- load.image(system.file('extdata/Leonardo_Birds.jpg',package='imager'))
plot(im, axes=FALSE)
```

EDIT The above code works - the problem appears to be only in some bookdown situations.

[cderv]

When putting your code in test.html and knitting, It seems to work fine. See below, I got one image above and one under

packageVersion("rmarkdown")
#> [1] '2.1'

[MBN]

You are correct that it seems to work by itself! It may be a side effect of the bookdown format where i originally had the issue arise - I'll try to recreate the issue as simply as possible.

[MBN]

The issue is that even text copied above the first top level heading is not rendered in the final bookdown document.

Image below is from the default template (i.e. Create a new bookdown project from Rstudio IDE) where i've copied some text from below the heading to above the heading and it does not render.

Note; just replacing the yaml header of the code in the first post to the header below does not reproduce the problem.

---
site: bookdown::bookdown_site
documentclass: book
---

To create the problem, the minimum appears to be a _output.yml file in the same directory as this index.rmd that has just one line bookdown::gitbook:
That line seems to enforce a table of contents and that appears to strip out anything (image or text) before the first top level heading by default - so can this behaviour be modified?

[apreshill]

Try using includes with before_body like this in your _output.yml file:

bookdown::gitbook:
  css: assets/style.css
  includes:
    before_body: assets/big-image.html
    after_body: assets/footer.html

[MBN]

@apreshill

includes: before_body:

This solution requires saving image and/or text in a html file? Or could it take an image, or alternatively an Rhtml file?

Edit
Having thought about it for a bit - yes, includes is an option that will probably work, but it feels unnecessary - how about bookdown::gitbook: doesn't constrain the user to its ideal scenario of "nothing can exist above the top level header, therefore I will ignore anything that is there" - unless there is a really good reason I'm not aware of? Is this something that I could reasonably log as an issue at github?

Edit 2
Logged as issue on github

[MBN]

This code option appears to put the html (with my image) on top of every chapter.

includes: 
   before_body: my_image.html

The ideal behaviour is only at the top of the first chapter (i.e. index.rmd). Is this what in_header is meant to do? It does not seem compatible with the sidebar index.

includes:
   in_header: my_image.html

[MBN]

There is another option:
Insert image via yaml in index.rmd, using the solution under Tip 3. Add a Logo in your title/header/footer at this blog post

The code looks like this - note there are two spaces after ) to put the title on a new line when rendered:

--- 
title: |
  ![](my_image.png)  
  My title

However, when you hover over the image, it blows it up (to something it thinks is the original size? Can this "Hover" behaviour be disabled?

This also works with an image from the web (eg imgur link like https://i.imgur.com/7An2gTx.png) - just stick the link in the brackets.

The downside of a weblink is that is doesn't render in the Rstudio viewer.
"Note that the Viewer pane can only be used for local web content" Why oh why Ian Pylvainen?

OTOH, the weblink is preferred if you use the includes with html option, as the local link to my image got lost in the build process, while weblink was fine.

Note, I still think it is preferred that I could just have an image above a top level header without any fluffing around with includes or yaml headers. If you have a book, which is what bookdown is trying to replicate, you want to see the cover or something visual first, and that should appear before the top level header which is often Preface. I suspect if you go and look, you will struggle to convince yourself that seeing Preface above the cover image makes sense eg

[MBN]

Here is yet another option, which looks fine for HTML output, suggested under "adding a logo". The code below (which you can place below the top level heading) presumably goes direct through the knitting process and inserts itself in the final html. The issue is that the image doesn't make room for itself and ends up over the first text. Is there some simple html/css to sort this out?

<img src="https://i.imgur.com/GiViTbA.png" style="position:absolute;top:0px;height:100px;" />   

EDIT
Yes it's a hack, but I've added some space for the image to go by coding this into the yaml:

title: |
    .      
    
    .  
    
    .  
    
    .  
    
site: bookdown::bookdown_site

EDIT
I have summarised all currently available options that I am aware of here at stackoverflow with their disadvantages. None of those are great, so I have opened a github issue here

EDIT 2
A workable enough hack now at stackoverflow for html output, so the github issue closed unless others are interested later. If you are interested in pdf output, with images at the front, try this, or including cover pages from other pdfs, you might like to look at this.
The last option is also an answer to this post