JS想實(shí)現(xiàn)點(diǎn)擊切換圖片，Chrome會(huì)報(bào)錯(cuò)。

想實(shí)現(xiàn)點(diǎn)擊切換圖片的效果，但是會(huì)報(bào)錯(cuò)希望有朋友能幫忙看一下，謝謝。

/**
 *
 * @description 將圖片替換為被點(diǎn)擊的樣式
 * @param {*} clickedImgElement 點(diǎn)擊的圖片元素
 */
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;
    }
}

本來(lái)想通過(guò)更改img.src屬性來(lái)實(shí)現(xiàn)圖片的切換，但是Chrome會(huì)報(bào)下面的錯(cuò)。我該怎么修改？異步設(shè)置？

回答

編輯回答

離人歸

從你的截圖來(lái)看，新圖來(lái)自 windows 本地路徑（如 file:///d:\b.png）。
出于安全考慮，瀏覽器會(huì)禁止非 file:// 來(lái)源的網(wǎng)頁(yè)訪問(wèn)，要不然，你瀏覽的任何網(wǎng)頁(yè)都可以隨意訪問(wèn)你的本地磁盤(pán)文件。

也就是說(shuō)，當(dāng)你用 file://xxx.html 打開(kāi)網(wǎng)頁(yè)時(shí)，可以訪問(wèn)同類(lèi)的 file://... 或 http://...（含 https，下同）的資源。
若用 http://... 打開(kāi)網(wǎng)頁(yè)時(shí)，則不能訪問(wèn) file://... 的資源。

以下是測(cè)試?yán)?/p>

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

                    // 改成遠(yuǎn)端路徑可以
                    // this.src = "https://www.baidu.com/img/bd_logo1.png";
                });
            });
        </script>
    </head>
    <body>
        <img src="a.png" />
    </body>
</html>

2017年4月7日 13:18

編輯回答