无法从 HTTP 请求获取图像

Question

我已经检查了图像并且它们确实存在于服务器上。

我已经用这段代码在 CSS 规则中包含图像

.Invite{background: url("../images/interface/Shop/Btn_Ad_Invite_all.png") 0px 0px;}
.Invite:hover{ background-position-x: -86px; }
.Invite:active{ background-position-x: -172px; }

<div class="Button Invite" onclick="invite()"></div>

我正在尝试使用 jQuery Ajax get 并尝试在浏览器控制台中使用此代码将图像注入正文

$.get("https://fb.spot-the-differences.com/test/images/interface/Shop/Btn_Ad_Invite_all.png");
$.get("images/interface/Shop/Btn_Ad_Invite_all.png");
$("body").append("<img src='https://fb.spot-the-differences.com/test/images/interface/Shop/Btn_Ad_Invite_all.png'/>");
$("body").append("<img src='images/interface/Shop/Btn_Ad_Invite_all.png'/>");

我所有的浏览器（IE、Firefox、Chrome）都说无法获取图像而没有响应。 我本地网络中的其他计算机可以毫无问题地获取图像。

如果我复制图片网址并粘贴到浏览器地址，我可以毫无问题地接收图片：

谁能解释一下为什么会发生这种情况以及如何解决这个问题我不希望这种情况发生在我网站上的客户身上。

我将不胜感激任何形式的对话或帮助。

当我尝试将有问题的图像的路径更改为任何不准确的路径时，我发现了可疑的事情，但我仍然得到状态 failed 而不是 404 not found 像这样

<img src='http://google.Shop/Btn_Ad_Invite_all.png'/> 

jsfriddle我看到 IMG4 和 IMG2 一样什么都没有出现，甚至图像损坏图标

我需要一些建议，非常感谢。

Answer 1

您似乎使用了与网页不同的协议（HTTPS 与 HTTP），这可能会导致浏览器出现跨域安全问题。尝试任一：

 $.get("http://fb.spot-the-differences.com/test/images/interface/Shop/Btn_Ad_Invite_all.png");

或者这应该与页面协议无关

$.get("/test/images/interface/Shop/Btn_Ad_Invite_all.png");

如果您的目标是动态显示图像，我确实同意一些 cmets 虽然设置 图片标签的 src 属性并使用 css 定位精灵。例如：

 $('img').attr('src', '/test/images/interface/Shop/Btn_Ad_Invite_all.png');)