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

Question

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

这是一个链接：

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

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

Answer 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>

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

Answer 2

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

这里有一些关于这个主题的文章和一个演示

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

Answer 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 = ""/>