加载img图片时的跨域问题

最新推荐文章于 2024-05-17 13:52:13 发布
最新推荐文章于 2024-05-17 13:52:13 发布
阅读量1.2w 收藏 2
点赞数
文章标签： javascript 数据库 c# ViewUI
原文链接：http://www.cnblogs.com/yuan93/p/11494105.html
版权

当上传图片时，图片保存在第三方云服务器或者其它服务器上，返回的图片url不符合html的同源策略时，我们把这个图片的链接放到img标签的src属性里时，浏览器会报403的跨域报错

解决方案：给img标签加上'crossOrigin'属性即可解决图片跨域问题

转载于:https://www.cnblogs.com/yuan93/p/11494105.html

diaoxi2496
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
跨域图片资源权限(CORS enabled image)
09-22
主要介绍了跨域图片资源权限(CORS enabled image)的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
如何解决 img 标签的 src 属性存在跨域问题
yiguoxiaohai的博客
12-03 8772
如何解决 img 标签的 src 属性存在跨域问题
解决 H5 <img>加载图片跨域
采蘑菇的奥特曼
01-11 2362
1. <img> 标签 添加 `crossorigin="anonymous"` 2. 图片地址后拼接随机数或时间戳等 3. 后端服务或存储服务 配置 `Access-Control-Allow-Origin: *` 详情地址:https://www.jianshu.com/p/8fa0fb53c183 ...
img src跨域403问题
qq_40072810的博客
09-19 2776
问题描述 在html中的img标签里的src引入的是其它网站的图片，结果报错403， 尝试用a标签跳转到图片地址同样也是403， 但是我直接在浏览器中打开是能正常显示的。 请求的是别人服务器上的资源，把自己的referrer信息带过去了，所以被对方服务器拦截返回了403 解决方案 <head> .... <meta name="referrer" content="no-refe...
从 HTML image(img) 中获取 base64数据的函数封装（解决异步和跨域问题）
lld2002的专栏
01-05 3511
 从 HTML image(img) 中获取 base64数据的函数封装： getImageBase64Data = function(imgSrc) { function getBase64(img) { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.he...
HTML加载图片跨域
u011269322的博客
11-22 6549
解决canvas的getImageData 和 toDataURL跨域）1. HTML加载图片跨域问题2. HTML本地图片跨域问题3. canvas操作图片像素的跨域问题2.1 IE10浏览器不支持crossOrigin怎么办？2.2 crossOrigin属性为什么可以解决资源跨域问题？ 1. HTML加载图片跨域问题 通常我们在使用img标签的时候，外链图片资源是不会出现这种情况的。 当我们去是用脚本去加载一张图图片的在不同域的时候就会出现，图片资源的跨域的情况，这其实是浏览器的同源策略。 通常我们
Vue动态加载图片在跨域时无法显示的问题及解决方法
11-21
问题：VUE开发时因为要访问后端的接口所以要配置请求转发，如果直接转发全部请求，那么VUE动态绑定的src也会转发到后端，因为图片在前端，所以会收到404 NOT FOUND的报错。 常规的请求转发 在vue-cli3内，直接编辑...
详解nginx代理天地图做缓存解决跨域问题
01-10
作为一个GISer开发者，天地图是经常在项目中以底图的形式出现，其加载地址如： 1.天地图矢量：http://t{0-6}.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z} 2.天地图影像：...
九种跨域方式实现原理
03-03
Cookie、LocalStorage、IndexedDB等存储性内容DOM节点AJAX请求发送后，结果被浏览器拦截了但是有三个标签是允许跨域加载资源<imgsrc>[removed]当协议、子域名、主域名、端口号中任意一个不相同时，都
js实现跨域的几种方法汇总（图片ping、JSONP和CORS）
11-22
图片可以从任何URL中加载，所以将img的src设置成其他域的URL，即可以实现简单的跨域，可以使用onload和onerror事件来确定是否接受到了响应。 var img=new Image(); img.src='//www.jb51.net'; img.onerror=function...
cesium通过billboard加载gif图片例子
12-29
cesium，gif，billboard
一个关于image访问图片跨域的问题
weixin_42333548的博客
01-16 6936
通过 'img' 加载的图片，浏览器默认情况下会将其缓存起来。当我们从 JS 的代码中创建的 'img' 再去访问同一个图片时，浏览器就不会再发起新的请求，而是直接访问缓存的图片。但是由于 JS 中的 'img' 设置了 crossorigin，也就意味着它将要以 CORS 的方式请求，但缓存中的图片显然不是的，所以浏览器直接就拒绝了。连网络请求都没有发起。
canvas生成海报img跨域问题
lei_0912的博客
11-20 1212
记录解决img因缓存造成跨域的问题 用canvas生成海报，需要将服务器传来的图片都整合到一起，第一次生成是没有问题的，关掉之后重新生成，这个时候报错img的src报跨域问题了 尝试的解决办法: 1.cors跨域 服务器设置响应头(已经设置了，但饼不起作用) Access-Control-Allow-Origin:* 2.设置img跨域(已经设置了，但饼不起作用) imgs.setAttribute('crossOrigin', 'anonymous'); 3.给img的src地址后边拼接一个时间戳（起
JavaWeb项目img标签的图片无法加载的原因及解决方法
m0_66468899的博客
08-25 1067
1，原因：没有添加到 服务器【tomcat】中的配置中，【tomcat】不知道有图片资源需要加载。至此问题解决：若是有其他问题，可以先自行检查一下相对img 标签的图片相对路径是否写对了。../表示当前目录上一级目录的文件或文件夹，视后面跟着的名字而定。./表示当前目录下的某个文件或文件夹，视后面跟着的名字而定。.. 表示当前目录的上一级目录。
html5在线标记图片,html5 – img标签的HTML crossorigin属性
weixin_35363322的博客
06-03 314
我试图了解如何使用img标记的crossorigin属性.我找不到一个好的例子(我发现的关于CORS启用的图像用JavaScript代码解释,因此我看不到img标签的crossorigin属性.我猜错了,如果我理解错了,请纠正我的错误.首先,可以编写下面的代码片段来绘制图像到画布：function draw() {var canvas = document.getElementById("canv...
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
最新发布
u010234868的专栏
05-17 196
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
(Vue3+TS+Volar) 全局组件配置类型声明的最佳实践
从今年开始写写博客~~
05-14 233
简评：Volar官方全局组件的推荐写法，基于Volar，必须安装该插件，GlobalComponents是Volar专门为了解决全局组件类型而新增的类型接口。定义全局组件：使用GlobalComponents类型接口声明类型。
Vue.js的发展史（一）
2301_79683791的博客
05-15 756
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
setImmediate不能在浏览器中执行
Keep trying, keep going
05-14 164
的延迟时间设置为 0，但实际的延迟可能会因浏览器的最小延迟时间限制而稍有不同。函数实现类似的效果。函数不是浏览器的标准 API，而。
js img标签解决跨域
05-28
在使用 JavaScript 中的 `<img>` 标签加载跨域图片时，可能会遇到 "跨域问题" 的错误。这是因为浏览器在加载跨域图片时会应用同源策略，防止从其他域加载恶意代码。 为了解决这个问题，可以在服务器端设置响应头 `Access-Control-Allow-Origin`，允许特定域名访问图片。例如下面的代码设置允许 `https://example.com` 域名访问图片： ``` Access-Control-Allow-Origin: https://example.com ``` 如果你无法在服务器端设置响应头，可以使用 JavaScript 动态创建一个 `<img>` 标签，并将图片 URL 转换为一个可以通过 JavaScript 跨域加载的 URL。代码示例如下： ```javascript var img = new Image(); img.crossOrigin = "anonymous"; img.src = "https://example.com/image.jpg"; img.onload = function() { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0); var dataURL = canvas.toDataURL("image/png"); var img2 = new Image(); img2.src = dataURL; document.body.appendChild(img2); }; ``` 这段代码创建了一个 `<img>` 标签，并将其 `crossOrigin` 属性设置为 "anonymous"，表示允许跨域请求。然后设置图片 URL 并等待加载完成。当图片加载完成后，使用 `<canvas>` 将图片绘制到 canvas 上，并将 canvas 转换为 base64 编码的数据 URI。最后创建另一个 `<img>` 标签，将数据 URI 设置为 `src` 属性，从而显示图片。这种方法可以通过 JavaScript 跨域加载图片，但需要注意的是，如果图片非常大，可能会导致内存不足的问题。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值