图像无法在线加载，但在我离线（本地）尝试时有效，这是为什么呢？答案

【问题标题】：Images not loading online but works when I try it offline (local), why is this?图像无法在线加载，但在我离线（本地）尝试时有效，这是为什么呢？
【发布时间】：2017-01-13 23:53:54
【问题描述】：

我正在使用 localgetstorage 和 setstorage 加载链接列表并将它们显示为幻灯片。问题是，当我在我的 PC 上预览它时它可以工作，一旦我尝试在线使用我的服务器中的页面，它就无法工作。我是不是做错了什么？

这是一个链接：

http://hem.bredband.net/noor/bildspelet/bildspelet.html

它非常有问题，我宁愿只使用第三方幻灯片插件，但我不知道在哪里可以找到符合我需求且免费的插件..

【问题讨论】：

您是否正在尝试使用不同的域或子域进行操作？有时由于浏览器权限而在本地工作的东西突然由于在线跨域问题而无法工作。
不，这基本上只是拉入一个列表并向您展示它们.. 或者，我正在尝试从我的硬盘驱动器中提取图像，但这不应该阻止它正常工作之前做了几个版本.. 几乎相同，从那以后我所做的就是将所有内容和几行 css 居中.. 我认为
您肯定知道您是否使用了版本控制。使用 Subversion、Git 或 Mercurial，永不回头。

标签： javascript jquery html dynamic local-storage

【解决方案1】：

您是否以正确的方式引用图像？如果我查看您提供的链接的来源，我会看到对您的 c:-Drive:

的引用

<b>C:\Users\Admin\Pictures\IMG_0005.JPG<br>
C:\Users\Admin\Pictures\IMG_0631.JPG<br>
C:\Users\Admin\Pictures\IMG_0322.JPG</b><br>

我知道，在这种情况下它只是纯文本，但是如果您以相同的方式引用图像，它会解释您的问题...

【讨论】：

嗯...也许前缀 file:// 会有所帮助。
即使使用 file:// 你也会遇到问题。 file:// 存在安全风险，因此该协议仅适用于受信任的（本地）域。而且这些图片也只能在本地可见 - 这是 Noor 想要的吗？
@Ralf - 考虑到他想从上面的硬盘驱动器中提取图像的评论，听起来很合理。
@justkt- 是的，但为什么在这种情况下将 html 放在服务器上？
@Ralf - 对不起，你是对的，我唯一想做的就是让图片在本地可见，原因是我正在尝试制作屏幕显示。我希望我的网站成为您的起始页，当您暂停一段时间并且打开浏览器窗口时，您会看到幻灯片，就像屏幕保护程序一样。我想我应该尝试找到一个插件可能已经这样做了，我只是不喜欢放弃！

【解决方案2】：

除非您使用 FileAPI（使用 fileReader），否则您无法读取 HTML 页面中的本地文件但它只在 Firefox 3.6+ 中实现。可能它也将在 chrome 5.0 中

这里是some articles on this subject 和a demo

您还可以使用OfflineAPI 来存储有关文件选择的信息，并使用DragDrop 来扩展用户体验

【讨论】：

我真的很怀疑你的回答，尽管我会接受。我只是怀疑一个原因，那就是我认为我让它工作了，我可能是错的..不这么认为，但现在我会接受它。谢谢！
对不起，我不是很清楚。当您从计算机加载 HTML 页面时（使用 file:///path-to-your-html-file），您可以看到来自本地计算机的图片。但是，当您使用 http: 从服务器加载 HTML 页面时，您会更改协议（从 file: 到 http:），并且安全约束不允许您使用协议 file: 查看文件的内容。要绕过这些限制，您应该使用 HTML5 API，但它尚未在除 Firefox 3.6+ 之外的浏览器中实现。
您可以在本文中找到一些关于如何使用文件 API 的说明：incaseofstairs.com/2010/05/…

【解决方案3】：

刚刚遇到类似的问题。在本地主机（XAMPP）上，我有以下内容。

    <img src="images/table1.jpg" style="width: 100%; height: auto;" alt = ""/>

由于某些原因，我的本地服务器忽略了图像的实际名称是 table1.JPG，但在线服务器无法选择小写字母的扩展名。

    <img src="images/table1.JPG" style="width: 100%; height: auto;" alt = ""/>

【讨论】：