如何在弹出窗口中显示 base64 图像

Question

I've successfully displayed a base64 image on my webpage (a MS dynamics portal built on liquid templates) with this code, and then appending the element to a div:

imageElementCaseNote.src = 'data:image/png;base64, ${Picture}';

The issue I have is: how to the set the 'data-content' attribute of imageElementCaseNote , I tried the following, but get [object HTMLImageElement] instead of the image.

imageElementCaseNote.setAttribute('data-content', 'data:image/png;base64, ${Picture}');

What do I need to do to do? I think the data needs to be added as html but I can't work out how to do it.

All help appreciated.

Answer 1

There were two things I was missing, one obvious the other less so.

obvious: I needed to wrap the data in an image tag:

popImage = '<img src="' + imageElementCaseNote.src + '"/>';
ImageElementCaseNote.setAttribute('data-content', popImage);

less obvious: I needed to set the data-html attribute:

imageElementCaseNote.setAttribute('data-html', 'true');