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

【问题标题】：How to Load base64 image over https connection?如何通过 https 连接加载 base64 图像？
【发布时间】：2018-06-26 09:00:54
【问题描述】：

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

我尝试使用 JavaScript 将 base 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.

【问题讨论】：

您从 HTTPS 页面调用的 API 是否使用 HTTPS 获取 base64？
是的，这是一个 firebase API

标签： javascript image https base64

【解决方案1】：

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

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

【讨论】：

那么，你为什么不做var hImg = document.getElementById("idImg"); hImg.setAttribute('src', "data:image/png;base64," + base64);
上述两种方法仍然显示相同的错误