Quarto Pub: question mark appears where an image should on Quarto website

[anzac21]

Description

I'm trying to publish a Quarto website on Quarto Pub and it's working well except for one thing-- When I try to add a profile image to the main page, it displays on my local R Studio, and it displays on the quartopub.com preview (here: https://quartopub.com) but it doesn't display if I navigate to the actual website link here: https://anzac21.quarto.pub/adam-mcfall/. Instead, the image is replaced with a question mark surrounded by a box.

I've tried to make sure the file path is correct when calling the file for the image, and everything looks good to me. Here is the .qmd file code for the website section that includes the profile picture I'm trying to display.

---
title: "Welcome!"
pagetitle: "Adam McFall"
description-meta: "Adam McFall is a Biologist at the USGS Columbia Environmental Research Center, researching invasive carp species, movement ecology, and data science."
main-photo: /files/profiles/headshot.png ##THIS IS DISPLAYING AS A QUESTION MARK ON WEBSITE
main-photo-square: /files/profiles/headshot.png ##THIS IS DISPLAYING AS A QUESTION MARK ON WEBSITE
#title-block-banner: "#A2AAAD"
format:
  html:
    quarto-template-params:
      banner-header-class: "home"
---

::: {.grid}

::: {.g-col-16 .g-col-sm-4}

```{=html}
<div class="grid" style="--bs-columns: 5; row-gap: 0;">
  <div class="g-col-1 g-col-sm-0"></div>
  <div class="g-col-3 g-col-sm-5">
    <picture>
      <source media="(max-width: 576px)" srcset="{{< meta main-photo-square >}}">
      <source media="(min-width: 576px)" srcset="{{< meta main-photo >}}">
      <img class="img-fluid" src="{{< meta main-photo >}}" alt="{{< meta author-meta >}}">
    </picture>
  </div>
  <div class="g-col-1 g-col-sm-0"></div>
</div>
```

:::

::: {.g-col-8 .g-col-sm-8}

I am a Biologist with the U.S. Geological Survey at the [Columbia Environmental Research Center](https://www.usgs.gov/centers/columbia-environmental-research-center) in Columbia, Missouri. As part of the [Fisheries and Invasive Species Program](https://www.usgs.gov/centers/columbia-environmental-research-center/science/science-topics/invasive-species-ecology), my research focuses on understanding the behavior of invasive carp species/developing tools to limit their spread throughout the Mississippi River basin.

I received a M.S. in Integrative Conservation & Sustainability from the University of Georgia's Odum School of Ecology in 2023. My thesis looked at improving head-starting practices and developing a new soft release method to protect [threatened gopher frog populations in South Carolina](https://www.youtube.com/watch?v=LG9sLTHaark&t=5s). Before that, I graduated with a B.S. in Biology from the University of South Carolina, Aiken in 2019.

I'm interested in conservation ecology, data science, science communication, invasive species, amphibian ecology, ecotoxicology, and restoration ecology. I work a lot with R and GIS and have no trouble teaching myself new software. My latest pursuits are Quarto and LaTeX for writing protocols, manuscripts, and storing code.

Outside of work, I enjoy going for walks with my wife, spending time with my daughter, herping, camping, playing adult-league soccer, and board games with friends.

:::

:::

Thanks for the help!

[mcanouil]

Please provide the whole source code and not only a snippet out of context.

Here the website is telling you that the files do not exist.
Be sure to check that the image is within the _site when rendering locally and that you are not using a path outside of your project.

[cscheid]

I suspect what's happening is that Quarto is failing to recognize the paths you're using in the raw block, because we're not expecting picture or source elements. You'll need to explicitly add those resources to the document with the resources metadata entry.

[anzac21]

Okay, I see. I'll have to figure out how to do this. In the meantime, I'm just defaulting to the most basic way to add an image, given as an example by quarto here: https://quarto.org/docs/websites/website-tools.html
I decided to replace the html chunk with:

![](/files/profiles/headshot.png)

Now my profile picture shows up on the published version. This will work for now. But if you have an idea of how to include the html coding in the resources, feel free to let me know!

[mcanouil]

See the documentation (second hit for "resources" in the search).

• https://quarto.org/docs/websites/website-tools.html#site-resources