如何在Pure js中使用handlebars显示api中的图像？base64

<script id="image-template" type="text/x-handlebars-template">
  <img src="{{imageUrl}}" alt="API Image">
</script>

// 获取模板内容
var templateSource = document.getElementById("image-template").innerHTML;

// 编译模板
var template = Handlebars.compile(templateSource);

// 创建数据对象
var data = {
  imageUrl: "https://example.com/api/image" // 替换为实际的图像URL
};

// 生成HTML代码
var html = template(data);

// 将HTML代码插入到页面中
document.getElementById("image-container").innerHTML = html;

// 假设从API获取到的图像数据是一个字符串
var imageData = "your_image_data";

// 将图像数据转换为Base64编码
var base64Image = btoa(imageData);

// 将Base64编码后的图像数据设置到数据对象中
data.imageUrl = "data:image/png;base64," + base64Image;