解决关于引入的网络图片，浏览器无法正常打开的问题

最新推荐文章于 2024-03-02 16:36:26 发布

旧味清欢|

最新推荐文章于 2024-03-02 16:36:26 发布

阅读量804

点赞数

分类专栏： # HTML笔记文章标签： javascript

本文链接：https://blog.csdn.net/w1404273025/article/details/124006644

版权

HTML笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

"本文讨论了HTML页面引用网络图片时遇到的显示问题，通常由于服务器拦截或referer检查导致。通过分析，确定在HTTPS环境下，请求可能不携带referer。解决方案是在HTML头文件中添加`<meta name="referrer" content="no-referrer">`来禁止发送referer信息，从而解决图片无法显示的状况。这种方法适用于对referrer控制严格的场景。"

摘要由CSDN通过智能技术生成

项目场景：

html页面的src引用网络图片无法显示

问题描述

网络图片数据传输中网页无法显示图片的问题

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片引入</title>
</head>
<body>
  <img src="https://img-home.csdnimg.cn/images/20201124032511.png" title="CSDN">
  <!-- Src引用网络图片，当鼠板悬停图片时，显示title -->
</body>
</html>

原因分析：

服务器进行了拦截

服务器referer进行判断，认为不是正常referer，便拒绝了访问，我们可以模拟正常的referer请求下。经过测试发现，可以正常打开 https://img-home.csdnimg.cn/images/20201124032511.png，所以我们就可以知道，在https下，发送的请求是不带有referer的。故我们需要在头标签内增加状态修订

解决方案：

需要修改只需要在中修改referrer

在头文件中添加下列语句：

<head>
  <meta name="referrer" content="no-referrer">
<head>

meta标签中name=referrer属性主要用于控制客户端发送给服务端的referrer信息，告诉服务端一些客户端的信息，如：来源网页的地址。