img添加属性crossOrigin='anonymous'图片无法访问

简介: img添加属性crossOrigin='anonymous'图片无法访问

问题描述:

子域名m.demo.com 需要访问www.demo.com 下的图片,代码如下

可以正常访问
<img src="http://www.demo.com/uploads/demo.png">
不能正常访问
<img src="http://www.demo.com/uploads/demo.png" crossOrigin='anonymous'>

经过测试之后,发现加了 crossOrigin='anonymous' 属性的不能正常访问,

打开浏览器console发现是跨域问题,那就由后端解决

解决方法

在资源文件服务器www.demo.com ,修改Nginx配置

location ^~ /uploads/ {
  alias /www/wwwroot/demo.com/uploads/;
  # 开启允许跨域访问
  add_header 'Access-Control-Allow-Origin' '*';
}


参考

  1. html5中crossorigin属性
  2. canvas toDataURL 跨域问题 设置了crossOrigin = ‘anonymous’ 并没有完全解决问题
相关文章
|
3月前
|
搜索推荐
img标签上title与alt属性的区别是什么?
img标签上title与alt属性的区别是什么?
34 0
|
3月前
|
数据采集 算法 前端开发
img标签中的title和alt属性有什么区别
img标签中的title和alt属性有什么区别
18 0
|
9月前
|
前端开发 JavaScript 搜索推荐
img标签的alt和title有什么不同?媒体查询是什么?原型链和继承的六种实现方式
当图片加载不出来的时候,就会在图片未显示的地方出现一段 alt 设置的属性内容。
|
移动开发 前端开发 应用服务中间件
img添加属性crossOrigin='anonymous'图片无法访问
img添加属性crossOrigin='anonymous'图片无法访问
484 0
|
前端开发
react 判断标签img 图片是否存在,不存在则替换为默认图片
react 判断标签img 图片是否存在,不存在则替换为默认图片
613 0
|
编解码 前端开发 JavaScript
img标签中的srcset属性有什么用?
img元素的srcset属性用于浏览器根据宽、高和像素密度来加载相应的图片资源。 也就是说,我们不需要使用JavaScript也可以实现分辨率自适应。
340 0
|
前端开发
react设置img标签url网络地址不显示
react设置img标签url网络地址不显示
619 0
react设置img标签url网络地址不显示
当v-for遇到img标签-加载本地静态图片
当v-for遇到img标签-加载本地静态图片
Spartacus image alt属性的绑定实现
Spartacus image alt属性的绑定实现
84 0
Spartacus image alt属性的绑定实现