谁能解释我如何在 Var 中本地存储图像答案

【问题标题】：Can anyone explain how can I store images locally in Var谁能解释我如何在 Var 中本地存储图像
【发布时间】：2017-08-03 20:21:30
【问题描述】：

请帮忙，我正在运行我在这里找到的脚本：

<div class="container">
    <div id="slideshow">
        <img alt="slideshow" src="http://thumb7.shutterstock.com/photos/thumb_large/253822/156271139.jpg" id="imgClickAndChange" onclick="changeImage()" />
    </div>
</div>
<script>
<div class="container">
    <div id="slideshow">
        <img alt="slideshow" src="http://thumb7.shutterstock.com/photos/thumb_large/253822/156271139.jpg" id="imgClickAndChange" onclick="changeImage()" />
    </div>
</div>
<script>

    var imgs = ["http://thumb7.shutterstock.com/photos/thumb_large/253822/156271139.jpg", "http://thumb9.shutterstock.com/photos/thumb_large/554278/132632972.jpg", "http://thumb7.shutterstock.com/photos/thumb_large/101304/133879079.jpg", "http://thumb101.shutterstock.com/photos/thumb_large/422038/422038,1327874090,3.jpg", "http://thumb1.shutterstock.com/photos/thumb_large/975647/149914934.jpg", "http://thumb9.shutterstock.com/photos/thumb_large/195826/148988282.jpg"];

function changeImage(dir) {
    var img = document.getElementById("imgClickAndChange");
    img.src = imgs[imgs.indexOf(img.src) + (dir || 1)] || imgs[dir ? imgs.length - 1 : 0];
}

document.onkeydown = function(e) {
    e = e || window.event;
    if (e.keyCode == '37') {
        changeImage(-1) //left <- show Prev image
    } else if (e.keyCode == '39') {
        // right -> show next image
        changeImage()
    }
}

问题是我试图在本地/离线运行它。那么我该如何运行它呢

var imgs = ["pic1.gif", "pic2.gif", "pic3.gif", "pic4.gif", "pic5.gif"];

这让我发疯:)

请帮忙，非常感谢

【问题讨论】：

在第二个container DIV 之前有一个额外的<script> 标签。
想知道为什么我不能正确格式化它。谢谢

标签： javascript localhost var

【解决方案1】：

我相信您需要在本地运行服务器并托管图像。所以你的链接看起来像localhost:1339/photos/thumb_large/253822/156271139.jpg。

编辑：对不起，it is possible to embed images in html。

【讨论】：

您好，感谢您的回复，所以“/images/pic1”在脚本中不起作用？

【解决方案2】：

如果您可以依赖具有较长缓存寿命的图像，并且通过首先在线进行引导，那么您可能能够摆脱您的第一个解决方案，在该解决方案中引用第三方 URL。但这不太可能，除非您有一个非常可靠的第三方提供商，并且可以依赖最初的在线使用。

很可能会涉及更多...

如果图像是静态的（或静态副本就足够了），那么要离线运行，您需要将图像保存为与应用程序一起提供的静态资源，或者如果它们足够小并且您不希望提供其他文件。这种事情是获得 100% 离线应用程序的唯一方法，例如捆绑到一个严格离线的移动应用中。

如果图像本质上是动态的，它会更加复杂。在这种情况下，您需要将它们与您维护的一些服务器端逻辑同步。您可以将服务器设置为长时间缓存图像以满足离线客户端的需求，或者使用浏览器存储显式缓存它们。只有在您可以依赖在线初始化期间时，这种方法仍然有效。

【讨论】：

我在没有互联网连接的情况下在树莓派上运行，所以只是在从文件夹中运行图像之后 :) 此外，它们在信息亭模式下的 Firefox 中是非常小的 gif，谢谢
好的，所以中间解决方案（静态文件资产或 base64 编码）应该适合您。如果您使用内联文件，您将引用相对于脚本提供的路径的图像。如果脚本在 src 目录中，图像在 images 目录中，这是一个对等点，那么您可以使用例如../images/[image-name] 作为您的 src 值。
我一直在 windows 上测试 firefox，我猜 windows 会给出完全不同的结果。
应该不是问题。到目前为止，您引用的 img 标记和基本 JavaScript (~ES5) 是旧的且得到良好支持的技术。另一方面，如果您引入 ES6 语法或其他更新的好东西，您的里程可能会有所不同。
var imgs = ["orb1.png", "orb2.png", 不工作？

【解决方案3】：

我根据您的所有意见对其进行了排序。谢谢。

我使用base64，使用本站转换http://picbase64.com/

然后用编码的代码替换 URL..

非常感谢

【讨论】：