图片链接在img标签中无法加载的解决办法

最新推荐文章于 2025-10-13 21:06:14 发布
原创 最新推荐文章于 2025-10-13 21:06:14 发布 · 4.2k 阅读 · 27 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html

本文探讨了一个页面上图片src链接403错误的问题，通过在页面头部添加meta标签和尝试在img标签内设置referrer属性的方法，介绍了如何解决页面引用图片时遇到的权限问题。

文章目录

一、问题描述

img标签代码如下

<img src="https://img3.doubanio.com/view/subject/s/public/s29449796.jpg">

页面加载不出来，报403
在这里插入图片描述

但是复制链接到浏览器中又可以访问
在这里插入图片描述

二、解决办法

在页面头部加入一个 meta 标签
在这里插入图片描述

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

三、结果

在这里插入图片描述

四、补充

好像还有一种方法就是在 img 标签里加一个 referrer=“no-referrer” 属性

<img referrer="no-referrer" src="https://img3.doubanio.com/view/subject/s/public/s29449796.jpg">

但是这种方法我试了不行，不知道咋回事

Img图片预加载
qq_33475202的博客
07-30 1957
按照惯例，img图片预加载 平时我们都会使用 第一种方法： 直接使用 var img = new Image(); //创建一个Image对象，实现图片的预下载 img.onload =function(){ ......... } img.url = '图片路径'； if(img.complete){ // 如果图片已经存在于浏览器缓存，直接调用回调函数 img.onloa...
vue中img标签src使用https网络地址，图片无法显示问题
weixin_50083085的博客
07-14 2637
vue中img标签src使用https网络地址，图片无法显示问题
HTML Img标签 src为网络地址无法显示图片问题解决（https）
u011200562的博客
10-15 2万+
img src="https://pic.cnblogs.com/avatar/1549846/20191126100502.png" alt="加载失败"> 图片无法显示。只需要在标签内添加 就可以了。上面出现403就是因为，请求的是别人服务器上的资源，但把自己的referrer信息带过去了，被对方服务器拦截返回了403。，发送请求不会带上referrer信息，对方服务器也就无法拦截了。
前端图片加载失败、 img 出现裂图的原因全解析
最新发布
有一棵树的博客
10-13 1946
裂图”（broken image）是指浏览器尝试加载<img>标签的图片资源失败时的表现形式。常见表现：图片区域显示为灰底、叉号、占位符；控制台出现或警告；Network 面板中图片请求状态码为 404 / 403 / blocked。混合内容机制是现代浏览器为保证 HTTPS 安全性而做出的妥协与平衡。对于前端开发者而言，理解它的升级与阻止逻辑，是解决“裂图”的关键。类别原因浏览器行为解决方案资源不存在404裂图修正路径防盗链403裂图调整 Referer 或代理。
img标签src使用网络地址展示图片，https。。无法显示问题解决办法
热门推荐
1073960086的博客
07-18 4万+
&lt;head&gt; 标签区域加上 &lt;meta name="referrer" content="no-referrer"&gt;    
图片链接直接打开显示正常，放在img标签里就加载不出来的解决方法
qq_21280835的博客
03-24 1537
中加载一个后端返回的二维码图片地址，在浏览器可以直接打开，但放到img标签就显示不出来后来查资料得知是因为图片的链接是第三方地址，所以在有些浏览器可能会不兼容，导致不显示图片，比如谷歌不行，火狐却可以。
解决有时候加载不出img标签图片
weixin_44165764的博客
10-19 2666
在vue前端浏览器加载图片时，其他任何地方都能加载出，就唯独一个地方显示无法载入此图像
Vue动态加载图片在跨域时无法显示的问题及解决方法
10-15
本文主要探讨了在Vue项目开发中遇到的一个常见问题——动态加载的图片在跨域环境下无法正常显示的问题。这个问题的根源在于浏览器安全策略限制，导致前端应用无法直接从不同源（域名、协议或端口）的服务器上加载...
javascript动态改变img的src属性图片不显示的解决方法
12-08
在JavaScript编程中，动态改变`img`标签的`src`属性是一种常见的实现图像切换或动态加载图片的方法。然而，有时可能会遇到这样的问题：在IE浏览器（尤其是旧版本的IE6）中，即使`src`属性被正确地更新，图片却无法...
解决js图片加载时出现404的问题
10-23
使用`jQuery`时，可以在`img`标签加载前引入`jQuery`库，并在处理函数被定义之后对图片进行操作，例如`$('#testimg').error(function(){ $(this).hide(); })`。 4. 在编写处理函数时，需注意将函数定义在`<head>`...
Vue项目中动态设置img src属性在npm run build后图片无法加载，该如何解决打包失败的问题？
11-01
在Vue项目中，如果你遇到了动态设置img标签的src属性后，在执行`npm run build`打包过程中图片无法加载的问题，这通常是由于Webpack处理动态资源路径的方式导致的。首先，确保你已经阅读了《Vue动态设置img src无效...
img标签添加onerror显示没有加载图片时的图片
zunguitiancheng的专栏
05-25 1197
【Webpack 踩坑】img 标签图片加载不出来
C_hydar的博客
07-30 789
看了好多帖子都写的是打包后，图片有问题。，抱着试一下的态度加上去，没想到还真有用）标签路径解析错误，导致加载不出来。写原生代码，一下子踩了好多坑…不管怎么改控制台都显示下面的。一直用框架开发，好久没用过。文件成功加载了，以为不用。
img图片链接无效的问题
weixin_44143279的博客
12-28 1660
img标签src动态绑定，直接绑定路径是无法读取到的吗，会出现显示不出来的bug，解决办法使用require去请求静态资源即可 { rank: 1, roadName: "肇庆市茂高电子有限公司", img:require("../assets/parkWisdom/first.png"), color:'#FE3861', value:33, } ...
js img图片加载失败，重新加载+断网检查
weixin_33883178的博客
12-18 2452
我们常常会遇到img加载图片的时候因为网络问题或者图片过大导致图片加载失败的问题，页面就因为这张蹦掉的图变得不美观。所以我们需要图片加载失败的时候重新加载图片 原文链接www.jianshu.com/p/f63425d22… //js方法定义 function resetImgUrl(imgObj,imgSrc,maxErrorNum){ if(maxErrorNum &gt;...
关于html中img标签无法加载图片
m0_60435649的博客
10-15 3万+
html：w3school 在线教程 如题，本来想用<img>标签显示图片，但是始终无法加载出图片，显示结果如下： <html><head></head><body> <img src='w3school.jpg' width='104' height='142'/> </body></html> 网上有些说是要在<head>标签中加入<meta name="referrer...
img标签中src使用网络地址 图片不显示
我的博客
03-02 7330
图片链接在浏览器地址栏直接打开就正常显示，但放在img标签的src里，浏览器却加载不出来
js处理img标签加载图片失败，显示默认图片
coding乐园
03-01 4万+
1.第一种方法： 如果已经引入了jquery插件，就很好办。没有的话，如果实在需要，可以附上代码： script(type='text/javascript', src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js") //这是jade文件的写法，可以自行转换为htmlhandle error
在使用img标签的src属性引用网络图片资源时加载图片失败的问题
VVVinegar的博客
01-24 1万+
问题如标题，以简单代码演示：<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <img src="http://p1.so.qhmsg.com/t01f77e838597537491.gif"> <
评论 4
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

什么都干的派森

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值