AvatarImage with enhanced:img

[asansyzb]

Change Type

Addition

Proposed Changes

It would be helpful if there was a documentation on how to achieve this

<AvatarImage asChild  let:builder>
  <enhanced:img builders={[builder]}
    loading="lazy" src={reviewer.src} alt={reviewer.alt}
  />
</AvatarImage>```

[huntabyte]

Does this work with the following?

<AvatarImage asChild let:builder>
  <enhanced:img use:builder.action {...builder}
    loading="lazy" src={reviewer.src} alt={reviewer.alt}
  />
</AvatarImage>

[shyakadavis]

Hey, @huntabyte

Ran into something recently and doing that proposed way doesn't work - seems there's no builder on the Avatar.Image comp.

Error:

Property 'default' does not exist on type '{}'.ts(2339)

Tried doing let:builder on the root, but same error.

I still don't well understand the whole passing of builders/delegation, else I would have P.R'ed. 🙁

[huntabyte]

There is a builder slot prop if you're working with bits directly. If shadcn-svelte doesn't have it we may need to ensure it's being passed through over there

[huntabyte]

Are you not able to access the builder @shyakadavis ?

[shyakadavis]

Oh, sorry @huntabyte - forgot to follow up on this. 🙁

So, yeah. There's no builder to access - same error as the above.

I had tried digging around, but couldn't figure it out, and somehow forgot to post my response here.

[shyakadavis]

Hiya;

Quick question about something related-ish;

How can I bind a variable to an AvatarImage?

Doing something like this:

<script lang="ts">
	import { onMount } from 'svelte';
	let img_element: HTMLImageElement;

	onMount(() => {
			img_element.onload = () => {
				// do something
		};
	});
</script>
	
<Avatar.Image src={somewhere} bind:this={img_element} />

yields this error:

Type 'AvatarImage__SvelteComponent_' is missing the following properties from type 'HTMLImageElement': align, alt, border, complete, and 316 more.ts(2740)

---

Since I wanted to verify that it was simply being bound to, I threw in an any on the variable, and lo and behold;

Uncaught (in promise) TypeError: can't access property "onload", img_element is undefined

Currently, is there is no way to bind to it?
Aside from the type errors, I would appreciate any guidance on how to bind to an image properly.

Thanks.

[huntabyte]

Closing as fixed in bits-ui@next