CODEWITHSUNDEEP
svelte
Alexmedkex
Alexmedkex

Reputation: 457

bind:this referencing the same variable between components

See example here:

https://codesandbox.io/s/wonderful-wave-j0kp2?file=/App.svelte

I have one component that uploads an image and displays it. However, when uploading an image in several different instances of this component, the image will always be displayed in the first component.

I want to be able to upload and display the image in different invidivual components.

I'm using bind:this to set a reference to the <img> tag, so I can render the image. But it seems that all of the different instances of the component is referencing the same img tag?

What is happening here and how should I go about implementing it instead?

Upvotes: 0

Views: 778

Answers (2)

Alexmedkex
Alexmedkex

Reputation: 457

So the issue seems to be the "input" element being outside the "label" element. If I put it inside, it works.

It's strange, because it should work either way...

EDIT: The reason for this is apparently because the original solution depends on ID's, and Svelte doesn't automatically scope ID's.

Upvotes: 1

grohjy
grohjy

Reputation: 2149

Save your images outside of Image-component (for ex. App.svelte or store) and feed correct image as a prop to each Image-component

<Image src={image1} />
<Image src={image2} />

Now the Image components are the same, therefore a strange behaviour

EDIT:

Actually your code should work. Here is a very simple example with input-fields:
https://svelte.dev/repl/8d364486b1c64d47aa0a03fd50d767bf?version=3.24.1

I don’t know why your code doesn’t work, but if you save your images to an array outside, then it should work.

EDIT2:

I have updated my REPL, now it works. With ipad I couldn’t get onload-event working with image load, but createObjectURL made the trick. My example works, but I don’t know what’s the mistake in your example. It should work.

Upvotes: 1

Related Questions