（角度）如何動態插入 <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()清除文本，從而無法編寫腳本，則這一點很重要，因為否則會非常不安全。