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

最新推荐文章于 2024-07-30 16:29:30 发布
最新推荐文章于 2024-07-30 16:29:30 发布
阅读量4.1k 收藏 27
点赞数 6
CC 4.0 BY-SA版权
分类专栏： Vue 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43721000/article/details/123905125
本文探讨了一个页面上图片src链接403错误的问题，通过在页面头部添加meta标签和尝试在img标签内设置referrer属性的方法，介绍了如何解决页面引用图片时遇到的权限问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

一、问题描述

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">

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

前端项目部署在https服务上，项目中通过img标签访问http服务的图片（或访问其他http资源）时报错
来杯卡布奇诺的博客
05-30 1399
使用Content Security Policy (CSP)设置允许加载HTTP资源（不推荐）：虽然这种方法可以解决问题，但它降低了页面的安全性，因此不推荐使用。当你的前端项目部署在HTTPS服务上时，浏览器默认会阻止从非加密的HTTP服务加载资源，这是出于安全考虑。这种情况被称为“混合内容”（Mixed Content），即在一个通过HTTPS提供的页面上加载通过HTTP提供的资源。使用服务器端代理：另一种解决方案是在你的服务器上设置一个代理，将所有HTTP资源请求通过你的服务器转发。
解决js图片加载时出现404的问题
10-23
使用`jQuery`时，可以在`img`标签加载前引入`jQuery`库，并在处理函数被定义之后对图片进行操作，例如`$('#testimg').error(function(){ $(this).hide(); })`。 4. 在编写处理函数时，需注意将函数定义在`<head>`...
图片链接直接打开显示正常，放在img标签里就加载不出来的解决方法
qq_21280835的博客
03-24 1238
中加载一个后端返回的二维码图片地址，在浏览器可以直接打开，但放到img标签就显示不出来后来查资料得知是因为图片的链接是第三方地址，所以在有些浏览器可能会不兼容，导致不显示图片，比如谷歌不行，火狐却可以。
img标签添加onerror显示没有加载图片时的图片
zunguitiancheng的专栏
05-25 1186
【Webpack 踩坑】img 标签图片加载不出来
C_hydar的博客
07-30 737
看了好多帖子都写的是打包后，图片有问题。，抱着试一下的态度加上去，没想到还真有用）标签路径解析错误，导致加载不出来。写原生代码，一下子踩了好多坑…不管怎么改控制台都显示下面的。一直用框架开发，好久没用过。文件成功加载了，以为不用。
img图片链接无效的问题
weixin_44143279的博客
12-28 1384
img标签src动态绑定，直接绑定路径是无法读取到的吗，会出现显示不出来的bug，解决办法使用require去请求静态资源即可 { rank: 1, roadName: "肇庆市茂高电子有限公司", img:require("../assets/parkWisdom/first.png"), color:'#FE3861', value:33, } ...
解决有时候加载不出img标签图片
weixin_44165764的博客
10-19 2507
在vue前端浏览器加载图片时，其他任何地方都能加载出，就唯独一个地方显示无法载入此图像
Vue动态加载图片在跨域时无法显示的问题及解决方法
10-15
本文主要探讨了在Vue项目开发中遇到的一个常见问题——动态加载的图片在跨域环境下无法正常显示的问题。这个问题的根源在于浏览器安全策略限制，导致前端应用无法直接从不同源（域名、协议或端口）的服务器上加载...
javascript动态改变img的src属性图片不显示的解决方法
12-08
在JavaScript编程中，动态改变`img`标签的`src`属性是一种常见的实现图像切换或动态加载图片的方法。然而，有时可能会遇到这样的问题：在IE浏览器（尤其是旧版本的IE6）中，即使`src`属性被正确地更新，图片却无法...
Vue项目中动态设置img src属性在npm run build后图片无法加载，该如何解决打包失败的问题？
最新发布
11-01
在Vue项目中，如果你遇到了动态设置img标签的src属性后，在执行`npm run build`打包过程中图片无法加载的问题，这通常是由于Webpack处理动态资源路径的方式导致的。首先，确保你已经阅读了《Vue动态设置img src无效...
js img图片加载失败，重新加载+断网检查
weixin_33883178的博客
12-18 2417
我们常常会遇到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 6761
图片链接在浏览器地址栏直接打开就正常显示，但放在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"> <
JavaWeb项目img标签的图片无法加载的原因及解决方法
m0_66468899的博客
08-25 1643
1，原因：没有添加到 服务器【tomcat】中的配置中，【tomcat】不知道有图片资源需要加载。至此问题解决：若是有其他问题，可以先自行检查一下相对img 标签的图片相对路径是否写对了。../表示当前目录上一级目录的文件或文件夹，视后面跟着的名字而定。./表示当前目录下的某个文件或文件夹，视后面跟着的名字而定。.. 表示当前目录的上一级目录。
图片链接在img标签里打不开解决办法
qq_41835813的博客
11-11 3144
<img src="//images.weserv.nl/?url={{ mo[2] }}"> {{ mo[2] }}是图片链接路径
Vue img图片加载不出来或加载错误显示默认图片
yongyafang123的博客
07-29 1万+
之前写页面考虑不到什么占位图，这次UI设计都有一个占位图，不得不逼着自己更准确的考虑图片显示错误时的情况！ 1、期初，想着用背景来填充，如果图片显示则就自然而然的把背景图遮盖住了，可实际情况是，如果后台返回的图片有误不显示时，背景图上面还是会有一个破损的小图片显示不美观； background: url("../../../static/images/avaterSpaceMap.png"); b...
img标签图片加载失败
06-01
当图片的URL链接无法访问或者错误时，img标签就会显示加载失败的默认图片或者无法显示。此时可以通过以下方式来处理： 1. 检查URL链接是否正确，确保图片可以被访问。 2. 如果URL链接正确，但图片仍然无法加载，可以考虑使用备用图片作为替代方案。 3. 使用JavaScript代码来处理图片加载失败的情况，比如显示一个提示信息或者使用其他替代图片。 4. 对于用户上传的图片，需要进行审核和过滤，防止不合法的图片被显示在网站上。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

什么都干的派森

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

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

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

打赏作者

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

抵扣说明：

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

余额充值