问题描述
在此处查看示例：
https://codesandbox.io/s/wonderful-wave-j0kp2?file=/App.svelte
我有一个组件可以上传图像并显示它。但是，在该组件的多个不同实例中上载图像时，该图像将始终显示在第一个组件中。
我正在使用bind:this来设置对<img>标签的引用，因此我可以渲染图像。但是，似乎该组件的所有不同实例都引用相同的img标签？
这里发生了什么，我应该如何去实现它？
解决方法
将图像保存在图像组件之外（例如App.svelte或存储），并将正确的图像作为道具提供给每个图像组件
<Image src={image1} />
<Image src={image2} />
现在Image组件相同，因此行为很奇怪
编辑：
实际上，您的代码应该可以工作。这是一个带有输入字段的非常简单的示例：
https://svelte.dev/repl/8d364486b1c64d47aa0a03fd50d767bf?version=3.24.1
我不知道您的代码为什么不起作用，但是如果将图像保存到外部数组中，那么它应该起作用。
EDIT2：
我已经更新了REPL，现在可以使用了。使用ipad，我无法在图像加载时启用onload-event，但是createObjectURL可以解决问题。我的示例有效，但我不知道您的示例有什么错误。应该可以。
因此，问题似乎出在“输入”元素在“标签”元素之外。如果我把它放进去，那就行了。
这很奇怪，因为它应该以任何一种方式工作...
编辑：之所以这样做，显然是因为原始解决方案取决于ID，而Svelte不会自动作用域ID。