（角度）如何将<img/>标签动态插入<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

Can you try to pass the image in argument like this:

<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.