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
版权
本文总结了解决Chrome高版本浏览器中img标签通过src属性跨域获取图片失败的几种方法，包括更改浏览器设置、添加crossOrigin属性、设置Referrer-Policy等。在分析了不同版本Chrome的行为和错误提示后，找到了成功解决该问题的方案。
摘要由CSDN通过智能技术生成

解决方案总结：

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元/天 解锁文章
新凉
关注
专栏目录
JavaScript Chrome浏览器获取本地图片的属性
11-14
针对"JavaScript Chrome浏览器获取本地图片的属性"这一主题，我们来深入探讨如何在Chrome浏览器中有效地处理本地图片，以及如何绕过浏览器的限制获取图片信息。 1. **Chrome浏览器的同源策略**：同源策略是浏览器...
chrome59 下 img 标签下 src ftp 图片不显示
lirenyehua的博客
06-15 4660
问题： 更新chrome到59后  图片不显示了，ie正常。调试如图： 顺链接点进去后如图所示： 说名 59以后禁止。该换成http 方式请求即可。或者用base64的date方式。
在使用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 700
问题：input file.value(this.value)=c:fakepath/… 解决方案： window.URL.createObjectURL(this.files[0]);
在Chrome浏览器下使用Image标签SRC为空时显示18*18小的空图标
Tiger的专栏
12-19 1538
解决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 246
1.当点击某一按钮的时候，把图片域中的图片改变一下 看不清 function reflush() { document.getElementById(randimg).src="/servlet/CreateValidateNum"; } 2.说明 ”ser...
js改变img标签的src属性在IE下没反应的解决方法
10-27
在Chrome、Firefox等现代浏览器中，通过`document.getElementById`获取元素并直接设置`src`属性的新值，通常能够正常工作，图片会按预期加载。但在IE中，尤其是IE8及以下版本，由于浏览器的实现机制不同，可能会出现...
JS获取图片高度宽度的方法分享
10-24
而IE浏览器有一个快速缓存图片的机制，使得图片的`onload`事件有时不会被触发，因为浏览器是从本地缓存而非服务器获取图片，从而绕过了`onload`事件。 为了解决这个问题，可以使用`onload`事件来确保图片加载完成后...
jquery在Chrome下获取图片的长宽问题解决
10-27
首先，我们要理解为什么在某些情况下，直接通过`<img>`标签后的JavaScript或jQuery代码无法正确获取图片的宽度。通常，JavaScript在DOM（文档对象模型）加载完成后就会执行，但此时图片可能还在加载中。因此，如果...
img标签中，src后添加本地目录图片问题，加载本地资源失败问题
qq_45598161的博客
04-23 5243
由于过几天进行项目答辩，然而阿里云的服务器明天就到期了，于是把项目中的图片路径都改成了本地路径，启动程序发现图片不见了。 F12查看爆红 Failed to load resource:XXXXXX，加载资源失败。 图片也都变成了下面的样子。 就很神奇，因为发布到线上服务器时是没有问题的。上网查了之后才发现，原来是谷歌浏览器的安全性问题，也就是说为了安全，谷歌浏览器访问项目时是无法加载本地目录的资源的（其他浏览器没有尝试过）。 这就很苦恼，在网上找了很久，有的是让改Tomcat的server.xml文
Chrome浏览器https网站里http资源加载报错
huangpb的博客
05-06 4074
今天遇到这么一个问题，我们的网站是https的，Chrome浏览器在加载一个http的图片时报错：仔细查看报错的图片路径，发现图片路径的http协议被Chrome浏览器强制改成了https。
图片加载失败，img触发错误显示默认图片
qq_52666510的博客
03-30 3591
<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 3174
nginx配置静态资源跨域，或者把图片转成base64。确保加载图片的网站服务器在响应头中包含。这样就会告诉浏览器允许从任何域加载资源。
有关 Access to image at ‘file:‘ from origin ‘null‘ has been blocked by CORS policy 的解决办法
qq_42921357的博客
11-09 8550
有关 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 3316
夸克浏览器地址 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 2万+
img src="https://pic.cnblogs.com/avatar/1549846/20191126100502.png" alt="加载失败"> 图片无法显示。只需要在标签内添加 就可以了。上面出现403就是因为，请求的是别人服务器上的资源，但把自己的referrer信息带过去了，被对方服务器拦截返回了403。，发送请求不会带上referrer信息，对方服务器也就无法拦截了。
vue中img标签404错误处理事件onerror
m0_62823653的博客
05-29 8323
第一部分：vue中img标签onerror事件 第一种方法：使用@error方法能处理onerror事件（据说会导致回闪，目前没遇到） <img :src="xxx图片资源" @error="fn"> //当图片资源加载报错404时会被调用 fn(e) { //substitute为导入进来的图片 e.target.src = this.substitute }, //若是真的遇到了回闪 @error=>:onerror <img :src="xxx图片资源" :o
通过input上传图片，判断不同浏览器及图片类型和大小的js代码
最新发布
06-08
以下是一个基本的实现方案，可以用于判断不同浏览器和图片类型、大小： ```javascript function validateImage(file) { // 获取文件类型和大小 var fileType = file.type; var fileSize = file.size; // 判断...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值