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

Html5 html javascript
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.

Previous: Failed to render tag component using jsx loop in table of iview, compiler reported error, writing method

Next: Can properties of the same class in python call their own methods?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu