如何通过https连接加载base64图像？

Question

我通过API调用接收图像作为base64字符串。我的网站使用https保护。

我尝试使用像

这样的JavaScript将基本64字符串加载到HTML图像DOM

image.src = "data:image/png;base64," + data;

它会抛出错误

Mixed Content: The page at 'https://localhost:4200/share/raki' was loaded over HTTPS, but requested an insecure image 

'unsafe:data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAtAAAAUACAYAAABuzmU9AAAABHNCSVQICAgIfAhkiAAAIABJREFUeJzs3Xd4W9X5B/Dv1bIk7723HSdOHCd2nElICElI2DOslr1XKZTyo0AXXRTogkIplF1GGGUFSCCE7L2nkzhe8V7xkJdk3d8fsmTJkmxdWbLk5Pt5njyxru4990g+kt977jnvEabMe10EERERERG5RObrChARERERjSUMoImIiIiIJGAATUREREQkAQNoIiIiIiIJGEATEREREUnAAJqIiIiISAIG0EREREREEih8XQF/Ex8bhIfumYaAgNF9a3p7+/CXF7ejurZjVM9LRERERNIIXEhlQGx0IH772Fk+rcOv/rQBtfU6n9aBiM4sRVPjsGh+GmKiA906/ocNFfj0q2MerpXJy385z26brlOP5pZuHDzSiNXrytDW3uuVcwNAWnIoyipbvVb+WJYQFwSN2

...

+up/b149DPN+ei3+mvJBpU21/b5mtq2Jr187HMt3fwXt89f7cq5Hk4a2lv0/d2v+c3AWX810toF4A9sUavvOjUNAOhXZkSCCuIzlRwarRBbkI4016qw7oiKhzC4L9QWrIL4TGVGJCgpNEoN7S0qba7V+ur9amhvcWPt/YO3j9dT+5ubkKXxkaOUGBKp2vYmHWis1rqqIjfWHADgjwjQAAAAgAG6cAAAAAAGCNAAAACAAQI0AAAAYIAADQAAABggQAMAAAAGCNAAAACAAQI0AAAAYIAADQAAABggQAMAAAAGCNAAAACAAQI0AAAAYIAADQAAABggQAMAAAAGCNAAAACAAQI0AAAAYIAADQAAABggQAMAAAAGCNAAAACAAQI0AAAAYIAADQAAABggQAMAAAAGCNAAAACAAQI0AAAAYIAADQAAABggQAMAAAAGCNAAAACAAQI0AAAAYIAADQAAABj4P9MAtrMjAbB/AAAAAElFTkSuQmCC'. 

This content should also be served over HTTPS.

Answer 1

做这样的事情，它对我有用：

var  hImg  =  document.createElement("img");
    hImg.setAttribute('src',  "data:image/png;base64,"  + base64);