（角度）如何动态插入 <img> 标记为 <pre> 标签

Question

我正在使用Angular6。

我有一个带有电子邮件文本的预标签。 在此电子邮件文本中，例如[cid:image001.jpg]标签表示图像，使用image001.jpg ，我可以从后端检索该特定图像。

问题是，我什至不知道如何将Typescript文件中的新HTML元素插入pre标签。

我尝试使用replace()方法并将'[cid:image001.jpg]'替换为'<img ...>'但是（可以理解）它被解释为字符串。

帮助将不胜感激。

编辑：

图像的位置很重要，例如<img>标签应该出现在[cid:image001.jpg]位置。

电子邮件示例：

问候，

Lorem ipsum dolor坐下，一直保持着安静的状态。 Vestibulum vehicula egestas elit viverra auctor。 [cid：image001.jpg]莫比（Non vel lorem porta pellentesque ut non urna）。

整数tempcidunt viverra。 Vivamus ullamcorper et risus ac。 [CID：image002.jpg]

最好的祝福...

Answer 1

您是否可以尝试通过以下参数传递图像：

<img [cid]="pictureUrl">

Answer 2

我通过执行以下操作解决了这一问题，我进行了更改：

<pre> {{emailText}} </pre>

至：

<pre innerHTML="safeHTML(emailText)"> </pre>

如果safeHTML()清除文本，从而无法编写脚本，则这一点很重要，因为否则会非常不安全。