howTo reference an attached image in observable slide preso

New To Observable
1

I am following the example here: Slide / Mike Bostock | Observable

and trying to adapt it to use a different image. unfortunately my wordpress site isn’t secure yet, so I can’t read them from there. Any other good suggestions for a location to store them until I upgrade that site?

Meanwhile I’m trying to attach them to notebook but can’t reference them yet. I tried using await to no avail.
Here is my notebook: Story Visualizer / Bruce Crock | Observable

Here is a sample of the code I’ve tried:
slide.img${await FileAttachment("1967713290_a_creative_young_woman_and_machine_inventing_inspirational_computer_aided_design_solutions_to_save_t-transformed.jpeg").image()}

2

[Setting aside ‘slide’ for the moment, and taking this in turn]

Any other good suggestions for a location to store them until I upgrade that site?

If your images are smaller than 50MB, you can upload them directly into a notebook as a file attachment (seems you’re on the right track in doing this based on your next comment, but for reference):

Meanwhile I’m trying to attach them to notebook but can’t reference them yet.

… you definitely seem to have this working, just maybe you’re not using the JavaScript cell type?

FileAttachment("Picture1.png").image()

… will work if your cell is a JavaScript cell (otherwise it will likely just look like text). For reference:

[Now, back to ‘slide’]:

Step 1. In a JavaScript cell, import the slide functions (you do this correctly, so just writing for good measure for any others):

import {slide, slide_style} from "@mbostock/slide"

Step 2:

… then, notice that the working patterns in Mike’s notebook expect the image as a URL. So we can’t just enter in the rendered images for the slide function to work, we must give it a URL:

slide.img`${await FileAttachment("Picture1.png").url()}`

And that should do it!

3

Thanks so much for that help. Looks like file attachments will work well for me for the time being. I am clear on the difference between HTML vs js cells and I haven’t been consistent so it’s good to pay close attention.

Also, It makes sense that the slide object is looking for a URL, and thanks for showing me how to do that.

My next task was to load a set of images from attachments into an array so I can page through them. I struggled with it a bit and I am curious what it is about the way I wrote “storyImages5” that works while the way I wrote “storyImages4” doesn’t work.

image
image574×502 17.1 KB

Thanks again,

4

Hi again, @bcrock!

Unfurling the respective arrays by clicking the down arrow in the inspector view helps to clarify…

Your storyImage5 array is returning three values, comprised as a numerical index and the promise of a rendered image.

Your storyImage4 array is returning the text string used to call on a File Attachment:

If you wish to construct your storyArray4 to behave exactly like storyArray5, you just need to omit the ` around the file attachment:

storyImages4asPromise =[
 
  {"index":"0","img": FileAttachment("Picture1.png").image()},
  {"index":"1","img": FileAttachment("Picture2.png").image()},
  {"index":"2","img": FileAttachment("Picture3.png").image()}
   
  ]

In this way, you would be returning the promise of rendered image, so if you paste, e.g. storyImage4asPromise[2].img into a JavaScript cell, you’ll see you image. If you wish for this to render in a Markdown cell, you’d need to escape into JavaScript and await the promise: ${await storyImagesPromise[2].img}