img标签引用网络图片时无法加载

       最近报了个公开课,主要是想巩固一下这学期学的知识。没想到在第一天写作业的时候,就发现一个引用网络图片加载失败的问题。在这记录一下,以防后续出现类似的情况。

问题描述

使用img标签,src指向网络图片,地址是有效的,但是图片无法加载出来,预览和代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<img src="https://pic.cnblogs.com/avatar/2062798/20200614130312.png" title="吃猫的鱼" alt="图片加载失败,请尝试刷新页面">
</body>
</html>

解决方案

在页面中加入以下代码

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

或者在img标签中加入referrerpolicy="no-referrer"

<img src="" alt="" referrerpolicy="no-referrer">

效果预览

参考资料

Referrer Policy 介绍

原文地址:https://www.cnblogs.com/ast935478677/p/13296762.html