我们可以从打字稿代码更改图像源吗？答案

【问题标题】：Can we alter image source from typescript code?我们可以从打字稿代码更改图像源吗？
【发布时间】：2019-11-28 05:00:58
【问题描述】：

我从简单的 Typescript(.ts)+HTML(.js) 代码开始练习。在 HTML 页面中，我有以下标签来显示某些图像：

<img id="myimage" src='images/samsung_edge_silver.jpg' height="250px">
<div><b><span id="Name"></b></div>

现在我有 ts 文件来更改此代码中的字段。我可以使用以下方法更改跨度字段名称的值：

document.getElementById("pName").innerHTML = productName;

但是有什么方法可以更改 myimage 的源 URL 的值。

我读了一些答案，人们大多给出角度的答案。但这是纯粹的打字稿+html。我们如何为图像源分配新值？

【问题讨论】：

【解决方案1】：

你必须这样做：

(document.getElementById('test') as HTMLImageElement).src = 'http://www.image.com';

原因是document.getElementById('id') 将返回一个 HTMlElement 并且并非所有 HTMLElement 都具有 src 属性。

【讨论】：

【解决方案2】：

你可以这样设置。

document.getElementById('myimage').src = 'http://yourImagePathHere';

检查小提琴here

【讨论】：

感谢您的回答。但它不起作用。如果我们使用上述解决方案，我们会得到“[ts] Property 'src' does not exist on type 'HTMLElement'. [2339]”错误。
似乎图像 id 不匹配.. 这是工作小提琴jsfiddle.net/imjaydeep/1s7jhwub/8 看看..
我知道每个有效的 javascript 代码都是有效的打字稿代码。但这不是使用 ts 版本 3.4.5 编译的。仍然出现上述错误。
我也用打字稿对其进行了测试，并且它有效。如果您还没有得到答案，您可以创建一个可以复制的小提琴。
@riazosama 给出的答案有效。显然 getElementById 返回 HTMIElement 而不是 HTMLElement。

【解决方案3】：

如果你使用 angular，你可以这样做：

HTML：

<img [src]="mySource">

打字稿：

mySource = "/maybeAssets/default.png";

changeSourceImage() {
   this.mySource = "/maybeAssets/funnyCats.png"
}

【讨论】：

感谢您的回答。正如我提到的，我没有使用角度。它的简单打字稿文件。我确实明白，使用 Angular 可以很容易地修改任何 HTML 元素的属性。我故意避免在这里使用角度。
@VDevD 我没有注意到。对于完整的打字稿解决方案，您已经有了答案：D