猿问

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

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


/**

 *

 * @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会报下面的错。我该怎么修改?异步设置?

富国沪深
浏览 450回答 5
5回答

神不在的星期二

从你的截图来看,新图来自 windows 本地路径(如 file:///d:\b.png)。出于安全考虑,浏览器会禁止非&nbsp;file://&nbsp;来源的网页访问,要不然,你浏览的任何网页都可以随意访问你的本地磁盘文件。也就是说,当你用&nbsp;file://xxx.html&nbsp;打开网页时,可以访问同类的&nbsp;file://...&nbsp;或&nbsp;http://...(含 https,下同)的资源。若用&nbsp;http://...&nbsp;打开网页时,则不能访问&nbsp;file://...&nbsp;的资源。以下是测试例子<html>&nbsp; &nbsp; <head>&nbsp; &nbsp; &nbsp; &nbsp; <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>&nbsp; &nbsp; &nbsp; &nbsp; <script>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("img").click(function(e) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // 改成本地路径可能无法显示&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.src = "d:\b.png";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // 改成远端路径可以&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // this.src = "https://www.baidu.com/img/bd_logo1.png";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; </script>&nbsp; &nbsp; </head>&nbsp; &nbsp; <body>&nbsp; &nbsp; &nbsp; &nbsp; <img src="a.png" />&nbsp; &nbsp; </body></html>

慕姐8265434

图片路径问题吧

江户川乱折腾

使用http://代替file://

莫回无

赞同楼上回答,js权限问题,http访问的就无法调用file协议访问

繁华开满天机

兄弟 你想切换图片 可以把图片放在容器中, 然后通过对盒子none/block来实现切换
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答