使用 javascript 通过 https 提供图像答案

【问题标题】：Serve Image over https with javascript使用 javascript 通过 https 提供图像
【发布时间】：2016-10-28 00:20:00
【问题描述】：

我有一个安装了 apache 网络服务器的 Amazon ec2 实例。我使用 Certbot 安装了一个 SSL 证书。我想使用 javascript 在我的网站上显示图像。当用户输入编辑文本框时，我想动态更改图像。我目前使用 javascript 来改变它。当我访问图像时，我收到此消息“请求不安全的图像'http://myurl.jpg'。此内容也应通过 HTTPS 提供。如何使用 Https 来提供图像？

document.getElementById("img").src="http://myurl.jpg"

【问题讨论】：

How can I fix this? 使用 https
更改为 'myurl.jpg' ... 尝试通过 https 提供 http 的简单安全问题

标签： javascript html http ssl https

【解决方案1】：

替换为：“http://myurl.jpg” 用这个：“https://myurl.jpg”

够简单吗？

【讨论】：

【解决方案2】：

在 URL 中省略协议。然后它将默认使用与页面使用的相同协议。所以如果页面加载了https，图片也会使用https，不会报错：

document.getElementById("img").src="//myurl.jpg"

【讨论】：

【解决方案3】：

如果您希望图像文件路径作为 HTTPS 加载，同时仍使用相对路径，则必须设置 <base href="URL"/>。

我使用像 <img src="img/xxx.png" alt="xxx"> 这样的文件路径，但没有设置基本 URL，它将默认加载为 HTTP。要解决此问题，请在您的脑海中添加类似的内容。

<head> <?php $BaseDir = 'https://' . $_SERVER['SERVER_NAME'] .substr($_SERVER["SCRIPT_NAME"], 0, strrpos($_SERVER["SCRIPT_NAME"], "/") + 1); echo '<base href="' . $BaseDir . '" />'; ?> </head>

【讨论】：