bind:this 在组件之间引用相同的变量

Question

参见此处示例：

我有一个组件可以上传并显示图像。但是，当在该组件的多个不同实例中上传图片时，该图片将始终显示在第一个组件中。

我希望能够在不同的单个组件中上传和显示图像。

我正在使用 bind:this 设置对 <img> 标记的引用，以便我可以渲染图像。但是似乎组件的所有不同实例都引用了相同的 img 标签？

这里发生了什么，我应该如何着手实施它？

Answer 1

将您的图像保存在 Image-component 之外（例如 App.svelte 或存储）并将正确的图像作为道具提供给每个 Image-component

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

现在图像组件相同，因此出现奇怪的行为

编辑：

实际上您的代码应该可以工作。这是一个非常简单的例子 input-fields:
https://svelte.dev/repl/8d364486b1c64d47aa0a03fd50d767bf?version=3.24.1

我不知道为什么你的代码不起作用，但如果你将图像保存到外部数组，那么它应该可以。

编辑 2：

我已经更新了我的 REPL，现在可以使用了。使用 ipad 我无法让 onload-event 处理图像加载，但 createObjectURL 成功了。我的例子有效，但我不知道你的例子有什么错误。它应该有效。

Answer 2

所以问题似乎出在“标签”元素之外的“输入”元素。如果我把它放在里面，它就会起作用。

这很奇怪，因为它应该以任何一种方式工作...

编辑：这样做的原因显然是因为原始解决方案取决于 ID，而 Svelte 不会自动确定 ID 的范围。

bind:this referencing the same variable between components