Closed trgsv closed 3 weeks ago
Does it work with regular image tags?
Yes
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}
Try this: https://github.com/trgsv/shadcn-svelte-avatar-test I have an example with my described behavior.
Is this what I'm supposed to be seeing? @trgsv
Same behavior with Chrome, Firefox and Safari
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.
Closing as fixed in bits-ui@next
crossorigin="anonymous"
does not work on Image.Set this attribute and set the top level headers in the handle hook in
hooks.server.ts
: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.