JS想实现点击切换图片，Chrome会报错。

191312

发布于
2018-06-18

想实现点击切换图片的效果，但是会报错希望有朋友能帮忙看一下，谢谢。

/**
 *
 * @description 将图片替换为被点击的样式
 * @param {*} clickedImgElement 点击的图片元素
 */
function setImg(clickedImgElement) {
    console.log('clicked image source:' + clickedImgElement.src);
    if (clickedImgElement.className === 'nav-img') {
        console.log('nav-img class is cliked');
        clickedImgElement.src = SWITCH_URL;
    }
}

本来想通过更改img.src属性来实现图片的切换，但是Chrome会报下面的错。我该怎么修改？异步设置？

javascript html

html5

阅读 2.3k

5 个回答

✓ 已被采纳

从你的截图来看，新图来自 windows 本地路径（如 file:///d:\b.png）。
出于安全考虑，浏览器会禁止非 file:// 来源的网页访问，要不然，你浏览的任何网页都可以随意访问你的本地磁盘文件。

也就是说，当你用 file://xxx.html 打开网页时，可以访问同类的 file://... 或 http://...（含 https，下同）的资源。
若用 http://... 打开网页时，则不能访问 file://... 的资源。

以下是测试例子

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script>
            $(function() {
                $("img").click(function(e) {
                    // 改成本地路径可能无法显示
                    this.src = "d:\b.png";

                    // 改成远端路径可以
                    // this.src = "https://www.baidu.com/img/bd_logo1.png";
                });
            });
        </script>
    </head>
    <body>
        <img src="a.png" />
    </body>
</html>