(Angular) How can I dynamically insert an <img> tag into a <pre> tag

Question

I am using Angular6.

I have a pre tag with email text. Within this email text are tags like [cid:image001.jpg] which represent an image, using image001.jpg , I can retrieve that specific image from the back-end.

The problem is that I don't know how I can insert a new HTML element from the Typescript file into the pre tag, if this is even possible.

I have tried using a replace() method and replacing the '[cid:image001.jpg]' with '<img ...>' but it (understandably) gets interpreted as a string.

Help would be much appreciated.

Edit:

the positioning of the images is important, the <img> tag should appear where the [cid:image001.jpg] is, for example.

Example email:

Greetings,

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vehicula egestas elit viverra auctor. [cid:image001.jpg] Morbi at nisi vel lorem porta pellentesque ut non urna.

Integer tempor tincidunt viverra. Vivamus ullamcorper et risus ac. [cid:image002.jpg]

Best regards...

Answer 1

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

<img [cid]="pictureUrl">

Answer 2

I fixed this by doing the following, I changed:

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

To:

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

Where safeHTML() cleans the text so that scripting is not possible, this is important because it would be very unsafe otherwise.