Include dynamic local image in quarto dashboard using ojs

I have a quarto dashboard where I want the user to be able to choose a local image (or one stored in the GitHub repo where the dashboard is located) and then have that image displayed. I cant use shiny since I have too many images (thousands) and the shiny bundle becomes too big for most server options. I also need it to be fast, so even iframe solutions have not been satisfactory. I started looking into observable JavaScript (ojs), which has native support in quarto. I created the dropdown menu like this:


viewof selectedImagePath = Inputs.select(
  JSON.parse(dat).map(d => d.paths),
  {
    label: "Velg bilde",
    unique: true
  }
)

This produces something like 'filename.JPG'.

I then try to include the image like this:

html`<img 
    style="
      border-radius: 12px;
      max-width: 100%;
      height: auto;
      display: block;
      margin: 0 auto;
    "
    src=${selectedImagePath}
    alt="Selected image"
  >`

If I replace 'src=${selectedImagePath}' with 'filename.JPG', the image is displayed.

For a mre I created a small github repo: https://github.com/anders-kolstad/dynamic_image_mre

I also tried using FileAttachement(), but that apparently doesn't allow any dynamic inputs: https://talk.observablehq.com/t/dynamic-fileattachment-issue/3401

I'm also aware of options where you can select the image from the file explorer, but that's not what I want: https://observablehq.com/@kretep/untitled

Any help with this would be much appreciated.

Solution

Most of the code is fine, the only thing missing is just a single quotation mark:

html`<img
    // ...
    src='${selectedImagePath}'
  >`

Why? Because your image path contains spaces:

{ 
  "paths": "img/Acer platanoides - spisslønn - Ak, Follo, Ås - mai 2014.JPG"
}

When the full image path is not enclosed in quotation marks, it looks like this:

html`<img
    // ...
    src=img/Acer platanoides - spisslønn - Ak, Follo, Ås - mai 2014.JPG
  >`

When this HTML string is rendered as a DOM, you will find that all characters after the first space in the src are not included in the src attribute, but are instead parsed as custom attributes:

<img
  // ... 
  src="img/Acer" platanoides="" -="" spisslønn="" ak,="" follo,="" Ås="" mai="" 2014.jpg="" alt="Selected image">

So you just need add a single quotation.