IE11浏览器下cytoscape.js请求图片不显示

解决Linux环境下IE11浏览器访问时,使用cytoscape.js绘制网络拓扑图中节点背景图片无法显示的问题。通过修改crossorigin属性的设置,确保图片资源能够正确加载。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

现象:项目中使用angularjs2+cytoscape.js绘制网络拓扑图,其中节点背景使用了图片显示,在windows环境下调测,所有浏览器都正常显示,但是一放到Linux环境服务器上,IE11浏览器下访问无法显示,其他浏览器正常。

问题:通过对cytoscape.js源码打印发现请求图片是通过<img crossorigin="anonymous" src="assets/imgs/bird.jpg">方式去获取图片,打开nginx访问日志记录,只要IE11浏览器发送的http图片请求都会报302状态码。经分析,crossorigin属性是为了解决跨域问题使用,而我们项目中的图片都是在相应服务器上,并不需要跨域获取。

方法:将cytoscape.cjs.js中BRp.getCachedImage方法中如下内容

 var dataUriPrefix = 'data:';
    var isDataUri = url.substring(0, dataUriPrefix.length).toLowerCase() === dataUriPrefix;
    if (!isDataUri) {
      image.crossOrigin = crossOrigin; // prevent tainted canvas
    }

修改为:

if(url.indexOf("http://")!== -1||url.indexOf("https://")!== -1){
        image.crossOrigin = crossOrigin; // prevent tainted canvas
    }

 

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值