近期新浪微博抽风, 很多站长的图片都存在微博相册, 导致绝大部分网站的图片无法显示, 文主的站也不幸沦陷, 找了各种方法解决此问题, 后来综合各种说法自己找了个方法.
新浪微博相册外链图片不显示的其它一些解决办法:
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>
好了基本思路和代码就是这样, 希望有更好的方法, 欢迎留言讨论哦~~~~
来源: https://www.cnblogs.com/wangdadaer/p/sinaimg404.html