Chrome高版本浏览器img通过src获取图片失败

已于 2022-06-15 19:19:23 修改
阅读量1.9k 收藏 3
点赞数
分类专栏： Chrome浏览器 文章标签： chrome 前端 javascript react
于 2022-06-15 17:28:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TTO_OTT/article/details/125299285
版权

解决方案总结：

1、打开新网页，浏览器输入：​​chrome://flags/#block-insecure-private-network-requests，改成Disabled，重启浏览器。（需要客户手动操作，不采纳）

2、给img添加crossOrigin 属性（此方法不好用，can i use显示浏览器不支持img 标签的 src跨域问题

3、<meta name="referrer" content="no-referrer-when-downgrade" /> 参考：change referrer-policy in react js（未采用不适合项目）

4、前端设置方法（ 参考HTTP请求之referrer与Referrer-Policy）
       ① 通过Referrer-Policy HTTP header设置：Referrer-Policy: or

最低0.47元/天 解锁文章
新凉
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript Chrome浏览器获取本地图片的属性
11-14
针对"JavaScript Chrome浏览器获取本地图片的属性"这一主题，我们来深入探讨如何在Chrome浏览器中有效地处理本地图片，以及如何绕过浏览器的限制获取图片信息。 1. **Chrome浏览器的同源策略**：同源策略是浏览器...
jquery在Chrome下获取图片的长宽问题解决
10-27
首先，我们要理解为什么在某些情况下，直接通过`<img>`标签后的JavaScript或jQuery代码无法正确获取图片的宽度。通常，JavaScript在DOM（文档对象模型）加载完成后就会执行，但此时图片可能还在加载中。因此，如果...
我在使用ng-src时图片加载不出来后，Chrome会自动给img标签增边框，解决办法
糯米不开花的博客
06-30 2755
http://www.zhihu.com/question/27426689
chrome59 下 img 标签下 src ftp 图片不显示
lirenyehua的博客
06-15 4635
问题： 更新chrome到59后  图片不显示了，ie正常。调试如图： 顺链接点进去后如图所示： 说名 59以后禁止。该换成http 方式请求即可。或者用base64的date方式。
Access to image at ‘xxx‘ from origin ‘xxx‘ has been blocked by CORS policy解决方案
最新发布
qq_71214810的博客
05-24 1106
这个错误表明你尝试从某个源（origin）加载阿里云上的图片时，浏览器因为CORS（跨源资源共享）策略阻止了这次请求。尽管图片能正常显示，但浏览器的控制台仍然会报告这个错误，因为请求不满足CORS的要求
在使用img标签的src属性引用网络图片资源时加载图片失败的问题
VVVinegar的博客
01-24 1万+
问题如标题，以简单代码演示：<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <img src="http://p1.so.qhmsg.com/t01f77e838597537491.gif"> <
chrome img.src=c:fakepth....
08-06 685
问题：input file.value(this.value)=c:fakepath/… 解决方案： window.URL.createObjectURL(this.files[0]);
在Chrome浏览器下使用Image标签SRC为空时显示18*18小的空图标
Tiger的专栏
12-19 1521
解决Chrome浏览器下使用Image标签SRC为空时显示18*18小的空图标问题 img src="" id="img0"  width="480" height="320" style="visibility:hidden;"> 解决办法就是判断img标签的src属性是否为空，为空的设置display样式为none $(function() { v
javascript修改IMG标签的SRC实现验证码时,IE正常，火狐和google出状况
WindAndStorm的专栏
08-06 223
1.当点击某一按钮的时候，把图片域中的图片改变一下 看不清 function reflush() { document.getElementById(randimg).src="/servlet/CreateValidateNum"; } 2.说明 ”ser...
js获取图片宽高的方法
11-25
在JavaScript中，获取图片的宽高是一项常见的任务，特别是在处理图像加载和布局计算时。本文主要探讨了四种不同的方法来实现这一目标，并通过实例进行了详细分析。这些方法针对了图片加载的不同阶段，以及如何处理...
javascript 获取图片尺寸及放大图片
10-26
本文将详细介绍如何在不设置图片宽高的情况下获取图片尺寸，并探讨一种利用IE私有属性防止图片放大失真的方法，以及Firefox和Chrome浏览器中可用的`naturalWidth`和`naturalHeight`属性来获取图片原始尺寸。...
fetchImg：一种提取网页图片数据的浏览器插件
01-31
这涉及到DOM（文档对象模型）操作，通过遍历DOM树，找到所有`<img>`标签，获取它们的`src`属性，从而得到图片的URL。 Chrome Extension（Chrome插件）是Chrome浏览器的一个强大特性，它允许开发者扩展浏览器的功能...
img标签中，src后添加本地目录图片问题，加载本地资源失败问题
qq_45598161的博客
04-23 5188
由于过几天进行项目答辩，然而阿里云的服务器明天就到期了，于是把项目中的图片路径都改成了本地路径，启动程序发现图片不见了。 F12查看爆红 Failed to load resource:XXXXXX，加载资源失败。 图片也都变成了下面的样子。 就很神奇，因为发布到线上服务器时是没有问题的。上网查了之后才发现，原来是谷歌浏览器的安全性问题，也就是说为了安全，谷歌浏览器访问项目时是无法加载本地目录的资源的（其他浏览器没有尝试过）。 这就很苦恼，在网上找了很久，有的是让改Tomcat的server.xml文
图片加载失败，img触发错误显示默认图片
qq_52666510的博客
03-30 3346
<img src='要显示的图片路径' onError={(e) => {e.target.onerror = null;e.target.src="占位图片路径"}} /> onError：当图片加载出现错误，会触发。经常在这里事件里头写入 将图片导向默认报错图片，以免页面上出现红色的叉叉或者出现图片破裂的图标。但是如果备用图片也错误了，就会造成死循环的问题，前端就可能挂掉，这时候再添加上onerror = null就好。 react中可以用上面这个 onerror 原生的.
阿里云OSS图片访问出现跨域：Access to image at from origin has been blocked by CORS policy
qq_37194189的博客
05-02 3034
nginx配置静态资源跨域，或者把图片转成base64。确保加载图片的网站服务器在响应头中包含。这样就会告诉浏览器允许从任何域加载资源。
有关 Access to image at ‘file:‘ from origin ‘null‘ has been blocked by CORS policy 的解决办法
qq_42921357的博客
11-09 8348
有关 Access to image at ‘file:’ from origin ‘null’ has been blocked by CORS policy 的解决办法 在使用Three.js库完成数字孪生的课题中，遇到加载本地图片报错的问题，报错内容如下： Access to image at ‘file:///（本地绝对路径）/Earth.png’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests a
CORS前端跨域不安全文件记录
weixin_44032319的博客
10-28 3262
夸克浏览器地址 https://quark.sm.cn/s?q=Quark 垃圾百度 升级谷歌版本重制了设置 Access to image at ‘xxxxxxx’ from origin ‘xxxxxx’ has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space private. 报错说我本地的文件因为跨域安全被
HTML Img标签 src为网络地址无法显示图片问题解决（https）
热门推荐
u011200562的博客
10-15 1万+
img src="https://pic.cnblogs.com/avatar/1549846/20191126100502.png" alt="加载失败"> 图片无法显示。只需要在标签内添加 就可以了。上面出现403就是因为，请求的是别人服务器上的资源，但把自己的referrer信息带过去了，被对方服务器拦截返回了403。，发送请求不会带上referrer信息，对方服务器也就无法拦截了。
通过input上传图片，判断不同浏览器及图片类型和大小的js代码
06-08
以下是一个基本的实现方案，可以用于判断不同浏览器和图片类型、大小： ```javascript function validateImage(file) { // 获取文件类型和大小 var fileType = file.type; var fileSize = file.size; // 判断文件类型 if (fileType !== "image/png" && fileType !== "image/jpg" && fileType !== "image/jpeg") { alert("只支持 png, jpg 和 jpeg 格式的图片"); return false; } // 判断文件大小 if (fileSize > 5 * 1024 * 1024) { alert("文件大小不能超过 5MB"); return false; } // 判断浏览器类型 var isIE = navigator.userAgent.indexOf("Trident") !== -1; var isEdge = navigator.userAgent.indexOf("Edge") !== -1; var isChrome = navigator.userAgent.indexOf("Chrome") !== -1; if (isIE || isEdge) { // IE 和 Edge 浏览器 var objImg = document.createElement("img"); objImg.src = file.value; if (objImg.fileSize > 5 * 1024 * 1024) { alert("文件大小不能超过 5MB"); return false; } } else if (isChrome) { // Chrome 浏览器 var img = new Image(); img.src = window.URL.createObjectURL(file); img.onload = function() { if (this.width > 1920 || this.height > 1080) { alert("图片宽度不能超过 1920px，高度不能超过 1080px"); return false; } }; } return true; } // 监听上传图片事件 var fileInput = document.getElementById("fileInput"); fileInput.addEventListener("change", function() { var file = this.files[0]; if (validateImage(file)) { // 图片验证通过，可以进行上传操作 // ... } }); ``` 注意：以上代码仅为基本实现方案，可能存在一些兼容性问题和安全性问题，具体需要根据实际情况进行优化和改进。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值