Images preview but are broken in Quarto presentation

RStudio Cloud
#1

Hello,

I have created a super basic Quarto presentation in RStudio cloud, with an introductory slide straight from the template that loads automatically, and second slide that simply tries to place an image stored in my project folder (in a directory called images/).

The code/preview shows the image perfectly fine, however the image shows up as a broken link in the actual presentation.

I am struggling to see what I am missing here -- its not an issue of the size of the image, as I have constrained it to fit well within the presentation. When I change format to either beamer or pptx it works fine. I can also successfully create a standard markdown file with the image correctly shown using the exact same code. So it is only when format is set to revealjs where images no longer appear.

---
title: "Untitled"
format: revealjs
editor: visual
---

## Quarto

Quarto enables you to weave together content and executable code into a finished presentation. To learn more about Quarto presentations see <https://quarto.org/docs/presentations/>.

## Images

![](/cloud/project/images/llama.png){.absolute top="170" left="30" width="100" height="100"}
#2

I'm having the same issue. My image showed in Beamer but not revealjs. I tried moving my image to the same directory as the file but it still didn't work, although image previews. I'm on a Mac.

#3

I was able to hack around the issue, which seems to relate to relative file links within quarto documents that are themselves nested within subdirectories off the project main directory location.

When I placed my reveal.js presetnation in the project directory (as opposed to in a subdirectory) the images rendered fine.

#4

Thanks for reporting this. Can you provide the exact steps you took to reproduce the problem? My testing showed that the images worked when I viewed the presentation in the Preview pane after rendering, as well as when presenting.

#5

Take a look at the public project here. There are two (virtually) identical versions of the same reavealjs presentation -- one in parent folder and one in a subdirectory off the parent folder.

You can see in the file wtih suffix *WORKING.qmd that everything renders fine; in the *NONWORKING.qmd file the image successfully previews, but it is a broken link in the rendered presentation.

#6

This topic was automatically closed 21 days after the last reply. New replies are no longer allowed.

If you have a query related to it or one of the replies, start a new topic and refer back with a link.