I am using the vscode Quarto extension and I have a local .jpg file named `Cabin.jpg` and was hoping to attach it as shown in this [Observable example](https://observablehq.com/@observablehq/file-attachments).

I tried both this `image = FileAttachment("Cabin.jpg").image()` within an OJS cell.

And I tried `${await FileAttachment("Cabin.jpg").image()}` within the Quarto Markdown.

Neither option worked.  But I found a solution to displaying an image in this [Observable Notebook](https://observablehq.com/@eczajk1/convert-an-image-to-base64-data-url). 

Looks like I could copy the image address and convert the URL it to Base64 data.

```
cabinPic = 'https://images.unsplash.com/photo-1449158743715-0a90ebb6d2d8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=80'

cabin = {
  let img = new Image();
  img.crossOrigin = '*';
  img.src = cabinPic;
  await new Promise(resolve => img.addEventListener('load', resolve));
  let ctx = DOM.canvas(img.width, img.height).getContext('2d');
  ctx.drawImage(img, 0, 0);
  return ctx.canvas;
}
```
This rendered an image. As well as when I used `${cabin}` to place the image somewhere else on the page. 

But I was hoping to take advantage of Observable's `image()` function to leverage things like the [Color.js](https://github.com/luukdv/color.js) library. I was following this [Observable Notebook](https://observablehq.com/@mukhtyar/day-4-flora) when I ran into this problem. I am still not able to extract the color palette even when using the image URL. Not sure what is going on here. Any ideas?
cscheid
2022-04-15T15:32:48Z
scottfranz
enhancement ojs-engine
closed
Unable to Attach Image with Observable's File Attachment function
https://github.com/quarto-dev/quarto-cli/issues/649