How to put more than one image into an observable notebook cell?

Question

I have several images attached to an observable notebook. I'd like to show them all in a cell because the user can toggle through them with a dropdown select. Using an HTML cell, I have:

<style>
  figure.small-example-img {
    width: 20%;
    height: 100px; 
    display: inline-block;
  }
</style>

<figure class="small-example-img">
  <img src=`${await FileAttachment('Side.PNG').url()}` />
  <figcaption>Side: method one</figcaption>
</figure>
<figure class="small-example-img">
  <img src=`${img_urls.houseurl}` />
  <figcaption>house: method 2</figcaption>
</figure>
...and so on

In the first, I call the img url explicitly, and in the second I make a variable earlier to hold it. Both ways I end up with:

<figure class="small-example-img">
  <img src="\`https://static.observableusercontent.com/files/24_rest_of_url_7a9\`">
  <figcaption>Side</figcaption>
</figure>

If I put the URL directly into the src then it works fine.

What is the correct way to template this url into the html?

I suspect it has something to do with strange interpretation of the backticks?

There's an example file for this topic here but it doesn't have an image example

score 0 · Answer 1 · answered Nov 02 '22 at 00:10

Observable does seem to treat backticks as a special thing. If you take them out it seems to work just fine.

<figure class="small-example-img">
  <img src="${await FileAttachment('Side.PNG').url()}" />
  <figcaption>Side: method one</figcaption>
</figure>

This is one of those it works, but I don't know why answers, so if anyone knows the details, I'd love to know too!

How to put more than one image into an observable notebook cell?

1 Answers1