If JS wants to click to switch pictures, Chrome will report an error.

I want to achieve the effect of clicking and switching pictures, but I will report an error. I hope my friends can take a look at it. Thank you.

/**
 *
 * @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;
    }
}

originally intended to switch images by changing the img.src property, but Chrome will report the following error. How should I modify it? Asynchronous setting?

clipboard.png

Mar.20,2021

from your screenshot, the new image comes from the local path of windows (such as file:/d:\b.png).
for security reasons, browsers will disable access to pages that are not from file:// sources, otherwise, any web page you visit can access your local disk files at will.

that is, when you open a web page with file://xxx.html, you can visit similar file://. or http://. (including the same below as https,).
if you use http://. opens a web page, you cannot access the resources of file://..

< hr >

the following is a test example

<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://img.codeshelper.com/upload/img/2021/03/20/42salgfnga310961.png";
                });
            });
        </script>
    </head>
    <body>
        <img src="a.png" />
    </body>
</html>

picture path question


use http:// instead of file://


agree to answer upstairs, js permission question, http access cannot call file protocol to access


Brother, if you want to switch pictures, you can put the picture in a container, and then switch

through the box none/block.
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b330d2-2be7a.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b330d2-2be7a.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?