HTML Img标签 src为网络地址无法显示图片问题解决（https）

已于 2023-01-03 14:25:01 修改
阅读量1.9w 收藏 42
点赞数 14
文章标签： html img referrer 图片403
于 2020-10-15 14:01:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011200562/article/details/109095814
版权

举例说明：

<img src="https://pic.cnblogs.com/avatar/1549846/20191126100502.png" alt="加载失败"> 图片无法显示

查看控制台的network，错误信息为 403(forbidden)

只需要在<head>标签内添加 <meta name="referrer" content="no-referrer">就可以了

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

原理解析：

http请求头中有一个referrer字段，用来表示发起http请求的源地址信息

服务器端在拿到这个referrer值后判断请求是否来自本站

若不是则返回403，从而实现图片的防盗链。

上面出现403就是因为，请求的是别人服务器上的资源，但把自己的referrer信息带过去了，被对方服务器拦截返回了403

在前端可以通过meta来设置referrer policy(来源策略)，referrer设置成no-referrer，发送请求不会带上referrer信息，对方服务器也就无法拦截了  

 

前端一枚
关注
  • 14
    点赞
  • 踩
  • 42
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
完美解决img绝对地址在网络上无法显示的问题
hh1297240789的博客
04-18 3854
这个是我今天无意间遇到的一个问题，我将文件上传到一个文件之中，但是我用img访问绝对路径的方法却怎么也无法在网站之中打开，却可以在eclipse中打开，如下图所示 这个实在eclipse中打开的场景 这个是在safari中打开的场景 这个是我的原代码，我直接访问的我图片所在的根目录，如图所示出了问题 下面我们可以看一下这个图片的地址是参数信息，我们直接访问该地址发现是我们熟悉的404，这就...
Img标签中src为网络地址无法显示图片问题解决
liuyi6119的博客
05-22 2348
Img无法显示网络地址图片
img标签中src使用网络地址 图片不显示
最新发布
我的博客
03-02 3938
图片链接在浏览器地址栏直接打开就正常显示，但放在img标签的src里，浏览器却加载不出来
<img>标签显示不出图片——图片路径问题
热门推荐
cc_bk的博客
11-15 1万+
引言： 大家在进行开发的过程中，经常会有显示图片这个需求，但是却经常因为种种问题显示不了，接下来，我将详细叙述这个问题，希望对大家有所帮助。 图片显示不出，一般有三个问题： 一.图片所在路径错误 二.图片后缀名错误 系统自动隐藏了图片后缀名，本来是.png格式，却写成了.jpg或.jpeg 解决方法： 右键查看图片的详细属性，观察图片的后缀名 三.浏览器不支持 部分浏览器对有些路径书写方式不...
HTML Img标签 src为网络地址无法显示图片问题解决
m0_72929120的博客
06-30 1871
在前端可以通过meta来设置referrer policy(来源策略)，referrer设置成no-referrer，发送请求不会带上referrer信息，对方服务器也就无法拦截了。上面出现403就是因为，请求的是别人服务器上的资源，但把自己的referrer信息带过去了，被对方服务器拦截返回了403。http请求头中有一个referrer字段，用来表示发起http请求的源地址信息。服务器端在拿到这个referrer值后判断请求是否来自本站。若不是则返回403，从而实现图片的防盗链。
vue中img标签src使用https网络地址，图片无法显示问题
weixin_50083085的博客
07-14 2151
vue中img标签src使用https网络地址，图片无法显示问题
img标签src引用网络图片不显示
weixin_46388053的博客
06-18 791
在html页面的加入：
img 标签显示不出https源的图片
weixin_42781537的博客
08-06 1041
问题描述 web端（PC）端使用img标签。src为https域的源。发现403，图片请求失败。 解决方案 只针对web端。在head里添加代码 <meta name="referrer" content="no-referrer">
关于img标签内:src不显示本地图片的问题
sqf251877543的博客
06-09 1万+
当src前面不加冒号展示本地图片，像下面这样写是没问题的： <img src="../../assets/images/app.png" width="375" /> 但是，当src前面加了冒号以后，像下面这样写本地图片是无法显示的（imgUrl为网络图片地址）： <img :src="imgUrl ? imgUrl : '../../assets/images/app.png'" width="375" /> 要想正常显示，需要使用require
关于vue v-for循环解决img标签的src动态绑定问题
10-18
在动态绑定<img>标签的src属性时，通常会遇到路径和上下文环境的问题。这主要是因为浏览器在加载图片时，需要根据当前页面的相对路径或者绝对路径来寻找资源。如果路径设置错误，浏览器无法找到资源，就会导致图片...
用正则表达式替换图片地址img标签
09-04
例如，假设我们要将所有图片地址替换为一个新的URL： ```javascript let newSrc = 'https://example.com/new-image.png'; content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) { ...
JavaScript正则表达式替换字符串中图片地址(img src)的方法
10-20
针对替换img标签src属性的问题，我们可以创建一个正则表达式来匹配img标签及其src属性。以下是一个示例： ```javascript const content = '<img src="//...
Java 获取Html文本中的img标签下src中的内容方法
08-27
Java 获取Html文本中的img标签下src中的内容方法 ...Java 获取Html文本中的img标签下src中的内容方法是一种实用的方法，能够帮助开发者快速地提取网页中的图片地址，并提高开发效率和数据分析能力。
HTML中img标签只显示图片中心位置的方法(三种方法)
09-28
首先，你需要将`<img>`标签的`position`属性设置为`absolute`，然后使用`clip: rect(top, right, bottom, left)`来定义图片显示的矩形区域。例如： ```html <img src="your-image-url" style="position: absolute; ...
html ＜img src=“1.jpg“/＞ 图片无法显示
mayidengta的博客
08-21 4529
第一，文件必须和图片在同一个文件夹。 第二，通过./来测试文件名字是否输入正确 第三，记得保存。 注释：若是路径错误，或者图片格式出现问题就会这样的问题
VUE-使用img标签时，动态设置图片地址，路径没错但是不显示图片原因
微笑
09-30 7362
<div class="exam-cates"> <!--Regular if14--> <div class="ec-child"> <a class="ec-child-main"> <img src="./img/icons/cate-icon-0.png" alt=...
HTML中的img标签中的src属性的路径问题：图片无法显示的原因及解决办法
m0_46594570的博客
02-08 1万+
HTML中的img标签中的src属性的路径问题：图片无法显示的原因及解决办法 img 标签使用格式 语法： <img src="" alt="" title="" /> 其中的src涉及相对路径及绝对路径。 图片无法显示的原因 使用了绝对路径； 相对路径使用时没有注意目录层之间的关系； 解决办法 很多编译器不能把图片的绝对路径解析出来，因此图片无法在网页中显示； 当使用相对路径时，需要注意代码文件需要多少级才能与图片所在的文件夹属于同一级，比如图中HTML训练题文件夹与images文件夹同
超实用，解决img标签src绑定了正确地址后，图片有时候不显示问题
chunxue8373的博客
09-17 9346
今天做项目的时候，遇到一个比较奇葩的问题，将后台返回的图片地址链接绑在img标签的scr上的时候，有时候会偶发的不显示，但是将后台返回的地址复制到浏览器，又能直接打开，我跑过去问后端，他说他知道这个问题，也说了半天，反正意思就是，这个问题以前就存在，确实后台存在问题，但是因为某些原因，他解决不...
Python图像聚类
XerCis的博客
05-19 3389
收集图片，分成N簇，使用PCV聚类
"<img src=\"图片地址\">图片不显示"
09-17
如果<img src="图片地址">中的图片无法显示，可能是由于以下几个原因： 1. 图片地址错误：请确保在src属性中输入的图片地址是正确的。确认图片地址是否存在拼写错误、后缀缺失、路径错误等问题。 2. 图片文件不存在：确保图片文件实际存在于指定的地址中。可以通过拷贝图片地址，在浏览器中打开来验证图片是否正常显示。如果能正常显示，则可能是其他问题导致。 3. 图片地址不可访问：有些图片地址可能设置了访问权限，需要登录或者具备特定权限才能访问。请确保您拥有访问该图片地址的权限。 4. 网络连接问题：如果网络连接不稳定或者断开，图片加载可能会受到影响。建议检查网络连接是否正常，可以尝试刷新页面或者检查其他网络相关设置。 5. HTML代码错误：确认图片代码是否正确嵌入到HTML中。确保标签及属性拼写没有错误，例如<img src="...">中引号使用是否正确。 如果上述解决方法都无效，可能还需要进一步调查其他可能性，比如图片格式不受支持、浏览器缓存问题等。你可以尝试使用不同的图片地址、浏览器或者设备来验证问题是否依然存在。如仍然无法解决问题，建议向相关技术支持人员寻求帮助。
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值