近期在自己项目中遇到引用一些网络图片资源,显示无法加载,但是在浏览器打开图片路径又可以显示的问题


解决办法:

在图片显示的界面把meta referrer标签改为never

<meta name="referrer" content="never">

或者在img标签上加上:

referrerpolicy="no-referrer"

即可显示


下面我们大致了解一下meta referrer标签

通过Referrer Policy 介绍,了解到,这是一种引用策略,可以用来防止图片或视频被盗。

策略名称 属性值(新) 属性值(旧)
No Referrer no-referrer never
No Referrer When Downgrade no-referrer-when-downgrade default
Origin Only origin -
Origin When Cross-origin origin-when-crossorigin -
Unsafe URL unsafe-url always
  • No Referrer:任何情况下都不发送 Referrer 信息;
  • No Referrer When Downgrade:仅当发生协议降级(如 HTTPS 页面引入 HTTP 资源,从 HTTPS 页面跳到 HTTP 等)时不发送 Referrer 信息。这个规则是现在大部分浏览器默认所采用的;
  • Origin Only:发送只包含 host 部分的 Referrer。启用这个规则,无论是否发生协议降级,无论是本站链接还是站外链接,都会发送 Referrer 信息,但是只包含协议 + host 部分(不包含具体的路径及参数等信息);
  • Origin When Cross-origin:仅在发生跨域访问时发送只包含 host 的 Referrer,同域下还是完整的。它与 Origin Only 的区别是多判断了是否 Cross-origin。需要注意的是协议、域名和端口都一致,才会被浏览器认为是同域;
  • Unsafe URL:无论是否发生协议降级,无论是本站链接还是站外链接,统统都发送 Referrer 信息。正如其名,这是最宽松而最不安全的策略;

关于如何运用,在Referrer策略与防盗链中也找到了用法,

这里只举例说一下img的:

通过<a>、<area>、<img>、<iframe>、<link>元素的referrerpolicy属性来规定策略。


结束

img引用网络图片资源无法加载问题解决的更多相关文章

  1. Android应用程序开发之图片操作(二)——工程图片资源的加载及OOM的处理

    (一)工程图片资源的加载方法 在Android应用程序开发之图片操作(一)中,详细说明了如何操作各种资源图片,只是有的没有附上示例代码,在此,我将针对项目工程中的图片资源的显示加载进行说明.官方说明, ...

  2. Android学习笔记之BitmapFactory.Options实现图片资源的加载...

    PS:小项目总算是做完了...历经20多天...素材,设计,以及实现全由自己完成...心力憔悴啊...该写写博客记录一下学习到的东西了... 学习内容: 1.使用BitmapFactory.Optio ...

  3. AngularJS进阶(三十八)上拉加载问题解决方法

    AngularJS上拉加载问题解决方法 项目中始终存在一个问题:当在搜索栏输入关键词后(见图1),按照既定的业务逻辑应该是服务端接收到请求后,首先返回查询的前7条数据,待客户端出现上拉加载时,继续查找 ...

  4. Django 04 模板标签(if、for、url、with、autoeacape、模板继承于引用、静态文件加载)

    Django 04 模板标签(if.for.url.with.autoeacape.模板继承于引用.静态文件加载) 一.if.for.url.with.autoescape urlpatterns = ...

  5. Web图片资源的加载与渲染时机

    此文研究页面中的图片资源的加载和渲染时机,使得我们能更好的管理图片资源,避免不必要的流量和提高用户体验. 浏览器的工作流程 要研究图片资源的加载和渲染,我们先要了解浏览器的工作原理.以Webkit引擎 ...

  6. Django 1.11 bootstrap样式文件无法加载问题解决

    先吐槽一波,多看官方教程,多找对应版本解决方法,多思考!... 在调试模式下面,打开页面无法加载bootstrap.min.css样式,解决思路如下: 查看settings文件INSTALL_APP配 ...

  7. [IOS]UIWebView 请求网络页面或者加载本地资源页面

    UIWebView是一个能够显示网页的IOS视图控件,我们可以用它来访问一个网站.下面是具体的实例: 操作步骤: 1.首先在xib文件中拖放一个UIWebView控件到view中 2.将下载的页面以及 ...

  8. vue 组件按需引用,vue-router懒加载,vue打包优化,加载动画

    当打包构建应用时,Javascript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. 结合 Vue 的 异步 ...

  9. 网站部署中遇到的问题-网页中js,css和图片资源无法加载

    问题描述: 打开的网页跑版,图片无法加载,用控制台调试发现css和js都没有加载. 原因: 没有启用IIS"静态内容". 解决方法: 设置"打开或关闭windows功能& ...

随机推荐

  1. 树莓派上安装boost库

    一.安装boost库 sudo apt-get install libboost-dev aptitude search boost 二.编写测试代码 #include <iostream> ...

  2. %各位大佬的博客.tql

    线性基:https://www.cnblogs.com/ljh2000-jump/p/5869991.html#4219854 数位DP  https://blog.csdn.net/jk211766 ...

  3. 小程序 页面传值 json 被截断

    因此解决这个报错的方法是将要传输的数据用 encodeURIComponent()函数(可把字符串作为 URI 组件进行编码) 先进行编码, 传输过去后再通过decodeURIComponent()函 ...

  4. 在RedHat 7.2中安装boost库

    在RedHat 7.2中安装boost库 环境,其它版本类似 Redhat7.2 64bit boost 1.64.0 步骤 去 boost官网 下载想要版本的.tar.gz,如下图 解压tar -v ...

  5. php下载

    生成迅雷下载链接 $url = "http://www.xxx.com/xxx/test.jpg"; echo "thunder://".base64_enco ...

  6. 69、schema的相关方法

    public class SObjectSchema { public void testSchema(){ //获取SObject的token //1.先获取所有token,然后通过key获取需要的 ...

  7. numpy 中文手册

    https://yiyibooks.cn/xx/NumPy_v111/user/index.html

  8. javascript函数调用的几种方式

    ​ function fn() { console.log(this.name); return "fn函数的返回值"; } /*1.方法调用*/ //方法调用,this指向win ...

  9. 7.使用mysql_export监控mysql

    ok,docker监控,宿主机CPU.磁盘.网络.内存监控我们都已讲过,是时候讲一波mysql监控了.本次mysql部署在客户端. 架构 客户端 MySql安装 ##下载mysql的repo源: [r ...

  10. leetcode.矩阵.766托普里茨矩阵-Java

    1. 具体题目 如果一个矩阵的每一方向由左上到右下的对角线上具有相同元素,那么这个矩阵是托普利茨矩阵.给定一个 M x N 的矩阵,当且仅当它是托普利茨矩阵时返回 True. 示例 1: 输入: ma ...