Relative image paths in presentations?

[collinmccarthy]

Description

Hello, sorry if I missed this in the docs/issues/Q&A, this seems really simple but I can't seem to find the answer anywhere.

I have a latex project, and now I want to create some slides to go along with it. My folder structure looks like:

project/
-- tex/
-- figures/  <--- shared figures/images
-- presentation/  <--- quarto files

Now in my presentation if I create a normal markdown file presentation/test.md containing:

# Test
![Caption](../figures/test.png)

It works as expected. If I then change the file type to .qmd and render in VSCode, it runs

❯ quarto preview test.qmd --no-browser --no-watch-inputs
pandoc 
  to: html
  output-file: test.html
  standalone: true
  section-divs: true
  html-math-method: mathjax
  wrap: none
  default-image-extension: png
  
metadata
  document-css: false
  link-citations: true
  date-format: long
  lang: en
  
Output created: test.html

Watching files for changes
Browse at http://localhost:6576/
  /figures/test.png (404: Not Found)

And the image doesn't show up, presumably because the path is messed up. But if I look at the HTML file directly, it correctly contains <p><img src="../figures/test.png" class="img-fluid figure-img"></p> and that test.html file can be opened up in my bowser and it works. So I guess it's only the Revealjs server that's not working?

How do I get relative image paths to work correctly, without duplicating the entire figures folder, or creating a symlink (which seems like a hack to me)? Thank you.

[cderv]

I believe this is because quarto preview test.qmd will run the preview server from the document root itself.
If you were to publish your document on the web, you would need to publish the ../figures folder too and not only your document. This means the real root of your HTML presentation is projects/ and not presentation/.

So overall, this is behaving as a web server would behave. You need to serve the files and folders in a way all the resources are found.

Did you try already to use a Quarto project (type default) and preview the project itself ? Previewing from the root would probably solve your path issue.

You could also consider your project as a Quarto website, with only a HTML revealjs presentation as index page. However, being a website resources would be identified and copied for you to _site folder, being the one folder you would published.

If you want some structure like this, I would consider Quarto projects. Otherwise, you could also use self contained document with resources embed (but this has limitation depending on the feature use and size limit you want). We recomma
end this though when it is practical to share only a single HTML file (https://quarto.org/docs/presentations/revealjs/presenting.html#publishing)

or creating a symlink (which seems like a hack to me)?

Does not seem like a hack to me. It is quite common on some system to solve such path issues. Though, it would not solve the deployment because if you wanted to publish only presentations/ folder, you would still need to have the figures/ folder also deployed in the same relative way (or symlinks would not work).

Hope it helps understand how path and web servers work

[collinmccarthy]

I believe this is because quarto preview test.qmd will run the preview server from the document root itself. If you were to publish your document on the web, you would need to publish the ../figures folder too and not only your document. This means the real root of your HTML presentation is projects/ and not presentation/.

Got it, makes sense. I would have thought then that if it I went up one level and tried to preview with quarto preview presentation/test.qmd it would work, but it doesn't, probably because I'm missing the information to specify where the root is.

Did you try already to use a Quarto project (type default) and preview the project itself ? Previewing from the root would probably solve your path issue.

I was not aware of Quarto projects, per say. After looking at the docs it seems like this is the solution for me. I'll give this a shot!

or creating a symlink (which seems like a hack to me)?

Does not seem like a hack to me. It is quite common on some system to solve such path issues.

This actually is working pretty well, but I like the idea of projects and using a single _quarto.yml file at the project root, so I'll see if I can get this to work.

Thank you for your help!! I'll update this once I get it working with projects and then close the discussion.

[collinmccarthy]

Success! The key was specifying the following in the _quarto.yml file:

project:
  type: default
  output-dir: ../

Then everything rendered correctly. Using a project with a single top-level .yml file helped clean up the individual .qmd files quite a bit too. Thanks for your help!