（Angular）如何将 <img> 标签动态插入 <pre> 标签答案

【问题标题】：(Angular) How can I dynamically insert an <img> tag into a <pre> tag（Angular）如何将 <img> 标签动态插入 <pre> 标签
【发布时间】：2019-05-04 18:33:17
【问题描述】：

我正在使用 Angular6。

我有一个带有电子邮件文本的前置标记。在这封电子邮件文本中有像[cid:image001.jpg] 这样代表图像的标签，使用image001.jpg，我可以从后端检索该特定图像。

问题是我不知道如何将 Typescript 文件中的新 HTML 元素插入到 pre 标记中，如果这是可能的话。

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

我们将不胜感激。

编辑：

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

电子邮件示例：

您好，

Lorem ipsum dolor sit amet，consectetur adipiscing elit。前庭 vehicula egestas elit viverra auctor。 [cid:image001.jpg] 莫比在 nisi vel lorem porta pellentesque ut non urna。

整数时间 tincidunt viverra。 Vivamus ullamcorper et risus ac。 [cid:image002.jpg]

最好的问候...

【问题讨论】：

标签： html angular typescript angular6

【解决方案1】：

你能尝试像这样在参数中传递图像吗：

<img [cid]="pictureUrl">

【讨论】：

我明白你在说什么，但我不是这个意思。我想我可能不清楚。图像的位置很重要，例如，如果我可以将它们全部放在底部，我可以使用您的策略，但我想在原始电子邮件中显示图像的位置。我认为你的策略是不可能的。

【解决方案2】：

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

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

收件人：

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

safeHTML() 清除文本以使脚本无法编写，这一点很重要，否则会非常不安全。

【讨论】：