无法为img元素拼接src与location.protocol，如何解决？

问题重现 #

var pic = document.createElement('img');

console.log('location.protocol only:' + location.protocol);
// 输出：location.protocol only:http:

console.log('pic.src only:' + pic.src);
// 输出：空

pic.src = location.protocol;
 
console.log(' pic.src = location.protocol:' + pic.src);
// 输出：location.protocol:http://localhost:8081/testbox/test.html

尝试用location.protocol拼接图片src时，发现赋值后浏览器会自动追加当前页面的完整路径，实际需求是拼接成http:// + 服务器返回的imageSrc，直接执行pic.src = location.protocol + imgSrc会导致路径重复，用location.protocol.toString()也无法解决。

解决方案 #

方法1：手动补全双斜杠

location.protocol的返回值末尾带冒号（如http:），我们需要的是带双斜杠的协议前缀（http://），直接拼接//再加上服务器返回的图片路径即可：

// 假设服务器返回的imgSrc是"example.com/imgs/photo.jpg"
pic.src = location.protocol + '//' + imgSrc;
// 最终得到：http://example.com/imgs/photo.jpg

方法2：使用location.origin（同域场景更简洁）

如果图片是同域资源，可以直接用location.origin获取完整的「协议+域名+端口」组合，再拼接相对路径：

// location.origin 返回 http://localhost:8081
pic.src = location.origin + '/testbox/imgs/photo.jpg';
// 最终得到：http://localhost:8081/testbox/imgs/photo.jpg

问题原因 #

当给img的src赋值不完整的URL（比如仅http:）时，浏览器会将其视为相对路径的一部分，自动补全当前页面的完整URL，因此才会出现路径追加的情况。

内容的提问来源于stack exchange，提问作者theWorstCoderInTheWorld