TypeScript中设置图像源

Question

我正在使用ionic 2，并希望在运行时加载图片。在过去的项目中，我总是这样做：

bikeImage.src = "data:image/jpeg;base64," + bikeResult.image;

但是它在TypeScript中无法工作。

我的HTML看起来像这样。

<img id='bikeImage'/>

它指出，src是一个未解决的变量。

我认为每个JavaScript代码在TypeScript中都可以工作。我错了吗？

有人有想法如何修复这个问题吗？

提前致谢。

- Luca Trembon

Answer 1

您没有说明如何将元素放入bikeImage中，但应该是：

bikeImage = document.getElementById("bikeImage") as HTMLImageElement;

如果你不将它断言为HTMLImageElement，那么它将只是一个没有src属性的HTMLElement。

- Nitzan Tomer

---

非常感谢。我以前从未听说过这个。 - Luca Trembon

Answer 2

我可能有点晚了，但我找到了最好和简单的方法。Angular 15使用最新的TypeScript版本。

在您的组件内创建一个函数。请参见下面：

onSelectImage(image: any){
document.images[document.images.length - 1].src = image.convertedProductImage;}

在你的HTML中调用它，例如(click)="onSelectImage(image)"。打开开发者工具并仔细检查文档图像中目标元素的索引。这应该会交换图像。

传递的参数是图像的base64编码：

"data:image/png;base64,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......"

例如这个例子

- Robinson Majorenos