Suggestion: FileAttachment(...).image({ width: 500 })

[yurivish]

Is your feature request related to a problem? Please describe.
I'd like to be able to easily load an image into an <img> element with a specific width.

Describe the solution you'd like
Some syntax like

FileAttachment(...).image({ width: 500 })

Describe alternatives you've considered
A chained promise that manually sets the width property and returns the image, but is verbose to write.

[CobusT]

Looks like there is an issue logged in the standard library for this. Good idea.

[CobusT]

The new standard library is now released and has this feature! We pass all the attributes through to the image, so you can use:
FileAttachment(...).image({ width: 500 })
or even:
FileAttachment(...).image({ width: 500, style: "border: 20px solid red" })

[yurivish]

Woot, that’s great, thank you Cobus!

[triptych]

https://observablehq.com/@triptych/new-options-for-images-in-observable

[triptych]

Is the list of attributes whitelisted?
I can pass {
title: "foo",
}
but not {
onclick: "bar"
}

[triptych]

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img

some other attributes like "crossorigin" don't seem to be passed either

[mbostock]

The onclick property takes a function, not a string, so try onclick: () => console.log("click").

[mbostock]

You need to use “crossOrigin” rather than “crossorigin”. https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/crossOrigin

[triptych]

I see, so you're passing the javascript properties , because HTML attributes are not case sensitive --> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img#attr-crossorigin

[triptych]

So cool! Thanks @mbostock for the tips! I updated my notebook with more examples.