Including images into Quarto

Adding images using markdown

The NHS-R Community logo taken from the GitHub repository directly

![](https://raw.githubusercontent.com/nhs-r-community/assets/main/logo/nhsr-logo.png)

Adding images using html

<a href='https://nhsrcommunity.com/'><img src='https://raw.githubusercontent.com/nhs-r-community/assets/main/logo/nhsr-logo.png' align="right" height="80" /></a>

Adding images using {knitr} and code chunks

This is for images that are available on the computer and in this case is to a folder called img which is part of the slide code:

knitr::include_graphics("img/purrr_cat.png")

Your turn - add an image in Visual view in RStudio

The Visual editor is great for WSIWYG (what you see is what you get) and the code that’s generated can be seen in Source:

Navigating folders

In markdown (Source view) linking to an image in the same area as the .qmd file is straightforward, as is going to a subfolder

![](bakers_1.png)
![](img/bakers_2.png)

![](../images/bakers_3.png)

Your turn

1. Open `images_report/images-report.qmd`
2. In the Source view we’ll link to an image in the same folder by putting the cursor between () and clicking Tab
3. Then link to an image in a subfolder by putting the cursor after the / and then Tab
4. Finishing with a link to an image in a subfolder from the main root

Seeing the image in the Source script

Using the drop down menu with a cog, found next to the blue arrow with Render

Preview Images and Equations

will not be ticked, selecting this will allow Quarto to show the image in the report script.

Alt text

Alternative text is predominately for people using screen readers to explain images but is very useful when images break:

![](img/bakers3.png){fig-alt="Three green fuzzy monsters in chef hats stand on top of one another, with the one on top pouring flour into a mixing bowl."}

Alt text using Markdown

Text appears between {} that comes after the link:

![](img/bakers_3.png){fig-alt="Three green fuzzy monsters in chef hats stand on top of one another, with the one on top pouring flour into a mixing bowl."}

Alt text using HTML

Appears after alt="" code:

<div id="bakeoff">
  <img src="img/bakers_3.png" alt="Alt text:Three green fuzzy monsters in chef hats stand on top of one another, with the one on top pouring flour into a mixing bowl.">
</div> 

Alt text using {knitr}

Code used in R chunks

```{r}
#| eval: false
#| fig-alt: "Three green fuzzy monsters in chef hats stand on top of one another, with the one on top pouring flour into a mixing bowl."

knitr::include_graphics("img/bakers_3.png")
```

Checking for alt text

To see alt text, when the report is viewed in the browser (not in the presentation or Viewer pane in RStudio), right click and Inspect Element.

If you have the setting to view the report in R Studio select the button:

And this will copy to the browser.

Resizing images using Markdown

Markdown supports resizing and the best way to generate this code can be from the Visual view as the wizard has prompts.

The wizard gives options for captions, alternative text, centering and sizes.

Resizing images using {knitr}

{knitr} can also be used with Quarto chunk options:

```{r}
#| out-width: "50%"

knitr::include_graphics("img/bakers_3.png")
```

Centre images

{knitr} in a code chunk can change where the image appears on the page:

```{r}
#| out-width: "30%"
#| fig-align: center

knitr::include_graphics("img/bakers_3.png")
```

Quiz - 1

How do you add headers in Markdown?

! Header

- Header

# Header

1. Header

Quiz - 2

What about lists? Bulleted? Numbered?

! Item 1

- Item 1

# Item 1

1. Item 1