Avatar.Image crossorigin does not work as expected

[trgsv]

crossorigin="anonymous" does not work on Image.

Set this attribute and set the top level headers in the handle hook in hooks.server.ts:

const response = await resolve(event);

response.headers.set('Cross-Origin-Embedder-Policy', 'require-corp');
response.headers.set('Cross-Origin-Opener-Policy', 'same-origin');

return response;

You get this error: Access to image at 'https://github.com/shadcn.png' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

[huntabyte]

Does it work with regular image tags?

[trgsv]

Yes

[huntabyte]

I'm not able to reproduce this. I get the same behavior on the primitive img as I do on the <Avatar.Image />.

This example of course fails due to CORS error, as expected, considering the fact its set to same-origin.

<script lang="ts">
    import { Avatar } from 'bits-ui'
</script>

<Avatar.Root>
    <Avatar.Image crossorigin="anonymous" src="https://github.com/huntabyte.png" alt="@huntabyte" />
    <Avatar.Fallback>HB</Avatar.Fallback>
</Avatar.Root>

<img src="https://github.com/huntabyte.png" crossorigin="anonymous" alt="hello" />

But this one works just as expected when I have the file locally in the /static dir:

<script lang="ts">
    import { Avatar } from 'bits-ui'
</script>

<Avatar.Root>
    <Avatar.Image crossorigin="anonymous" src="/huntabyte.png" alt="@huntabyte" />
    <Avatar.Fallback>HB</Avatar.Fallback>
</Avatar.Root>

<img src="/huntabyte.png" crossorigin="anonymous" alt="hello" />

If you're able to provide me with a reproduction repo that I can take a look at, I'm happy to investigate further, but I don't see how this would point back to bits, as this is what the <Avatar.Image /> looks like under the hood:

<script lang="ts">
    import { melt } from "@melt-ui/svelte";
    import { getImage, getAttrs } from "../ctx.js";
    import type { ImageProps } from "../types.js";

    type $$Props = ImageProps;
    export let src: $$Props["src"] = undefined;
    export let alt: $$Props["alt"] = undefined;
    export let asChild = false;

    $: image = getImage(src).elements.image;
    $: builder = $image;
    const attrs = getAttrs("image");
</script>

{#if asChild}
    <slot {builder} {attrs} />
{:else}
    <img use:melt={builder} {alt} {...$$restProps} {...attrs} />
{/if}

[trgsv]

Try this: https://github.com/trgsv/shadcn-svelte-avatar-test I have an example with my described behavior.

[huntabyte]

Is this what I'm supposed to be seeing? @trgsv

[trgsv]

[trgsv]

Same behavior with Chrome, Firefox and Safari

[huntabyte]

Ah I see it now... interesting 🤔

When I get some time I will try to determine if the same behavior occurs with just Melt UI to isolate the issue.

[huntabyte]

Closing as fixed in bits-ui@next