新浪微博相册图片外链限制,图床不显示解决方法总结!
近期新浪微博抽风,很多站长的图片都存在微博相册,导致绝大部分网站的图片无法显示,文主的站也不幸沦陷,找了各种方法解决此问题,后来综合各种说法自己找了个方法。
近期新浪微博抽风,很多站长的图片都存在微博相册,导致绝大部分网站的图片无法显示,文主的站也不幸沦陷,找了各种方法解决此问题,后来综合各种说法自己找了个方法。
新浪微博相册外链图片不显示的其它一些解决办法:
1、修改域名:ww1.sinaimg.cn 改为 ww4.sinaimg.cn 不好使;
2、修改referrer:在Header中新增:<meta name=”referrer” content=”no-referrer” />,不推荐,对整站有影响;
3、给img标签添加 referrerpolicy=”no-referrer” 属性:<img src=”https://ws3.sinaimg.cn/thumb150/xxoo.jpg” referrerpolicy=”no-referrer”>,本文用的方法,只修改文章内容版块的 img 标签,其它不受影响;
4、切换HTTP:直接使用HTTP链接,不要用HTTPS~~~
5、内嵌iframe:原理有点像no-referrer~ 使用iframe加载图片不会跟踪到原请求域名,可以加载图片!但是这个方法改动太大了,累死人~~~
6、第三方反代:有许多大佬提供反代方案,比如将 sinaimg.cn 替换成 sinaimg.in,不多介绍~~~临时方案。
7、付费服务:七牛、阿里云、付费图床等等;
8、自建图床。
说明:本方法不一定适合每一个站长,但是值得试一试,万一行了呢!
工具:editplus、jquery、简单HTML知识;
解决办法原理,以下面网址做说明:
<img src="http://wx3.sinaimg.cn/mw690/005Cikyoly1fy3yd869pfg30hs09yhe4.gif" />
这个图片在本站域名下用 img 标签是不显示的,但是改为以下格式就会显示:
<img src="http://wx3.sinaimg.cn/large/005Cikyoly1fy3yd869pfg30hs09yhe4.gif" referrerpolicy="no-referrer" />
也就是表面这个 img 标签下有两处改动,将 mw690 替换为 large,img 标签属性添加 referrerpolicy=”no-referrer” 这个属性。
由此可知,我们只需将原网址下的 mw690 替换为 large,然后添加属性 referrerpolicy=”no-referrer” 即可。
那么我们直接操作,首先是结构代码,这个代码是本站的结构代码,自己网站是什么结构自己看下,因地制宜:
<div id="postlist"> <table></table> <table></table> <div> <table> <tbody> <tr> <td>第一个td</td> <td> <div></div> <div class="pct"> <img src="https://user-images.githubusercontent.com/23384966/57830772-c0f4de00-77e5-11e9-8179-3495a36c25c4.gif"> <img src="http://www.gifdtm.com/data/attachment/forum/201806/13/211440j2fgmqgtg7ffy75p.jpg"/> <p>选择这个元素下的所有img标签</p> <img src="http://wx3.sinaimg.cn/large/005Cikyoly1fy3yd869pfg30hs09yhe4.gif" /> </div> </td> </tr> </tbody> </table> </div> <div></div> <table></table> </div>
下面是修改代码的步骤,可能有点差,高手勿喷:
<script src="jquery.js"></script> <script> //postlist 下面第一个 div 的 table 下面的 img 标签添加 referrerpolicy="no-referrer"属性 var imgs = $("#postlist .pct img");//选择 img 标签 imgs.attr("referrerpolicy","no-referrer"); imgs.attr("alt","alt文字"); //console.log(typeof imgs.attr("src"));//返回的是一个img的src //console.log(typeof imgs);//返回 imgs 类型,object类型 //声明空数组,等待接受元素 var arr = new Array(); //遍历 imgs 对象,以便取到 imgs 中的所有img标签 $.each(imgs,function(i,value){ //console.log(src + " " + value.src); //测试输出索引和值 str = value.src.replace(/\/mw690\//ig, "/large/"); //正则表达式替换字符串 //console.log(str); //测试输出字符串 arr.push(str); //将替换后字符串添加到arr数组 //console.log(arr); $(this).attr("src",arr[i]); //将对应的当前第i个img标签的src属性设置为替换后字符串 }); </script>
好了基本思路和代码就是这样,希望有更好的方法,欢迎留言讨论哦~~~~