使用组件加载图片跨域，直接img引入却是正常的

heikaimu / vue3-waterfall-plugin

vue3 瀑布流插件，支持 PC 和移动端，支持 animate 的所有动画效果，支持图片懒加载

https://vue3-waterfall.netlify.app/

456 stars 34 forks source link

Closed qingchen1998 closed 2 years ago

qingchen1998 commented 2 years ago

用组件的情况下，图片发生跨域，但是，我直接用引入却是没问题的，请问是怎么回事？请教一下 下面是直接引入 waterfall-直接引入.png waterfall-直接引入请求.png 下面是使用组件 waterfall-组件引入.png waterfall-组件引入请求.png

qingchen1998 commented 2 years ago

heikaimu commented 2 years ago

首先你图片和你现在的项目服务器是存在跨域关系的。而dom里面的img标签本身是不会有跨域的。但是js里面的img是带了cross origin的。插件里会有js去加载图片。所以要解决这个问题。要么就像我例子里面用第三方前缀临时解决。要么就把你们图片资源的跨域设置了。

qingchen1998 commented 2 years ago

谢谢

qingchen1998 commented 2 years ago

//image.crossOrigin = 'Anonymous' // 支持跨域图片

把这行代码注释掉就ok了

heikaimu commented 2 years ago

嗯，后面有时间了我提个PR把crossOrigin设置成参数传递就好了

lilulu806 commented 1 year ago

我也遇到了同样的问题，并且后端返回的图片地址还要加上前缀，怎么解决啊

heikaimu commented 1 year ago

crossOrigin = false

lilulu806 commented 1 year ago

啊啊解决了，非常感谢