图片链接在地址栏请求可以显示,但是img标签的src不显示

最新推荐文章于 2024-03-24 08:27:57 发布
最新推荐文章于 2024-03-24 08:27:57 发布
阅读量1.2w 收藏 28
点赞数 22
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43869439/article/details/106621186
版权

最近遇到在html中的标签img中使用网址请求的图片不显示的问题，看下代码

//html
<img :src="movie.images.small+'?apikey=0df993c66c0c636e29ecbb5344252a4a'" alt="电影海报">

在页面这样显示的
在这里插入图片描述
然后在页面上选中元素查看
在这里插入图片描述
也是正常的，是自己想要的效果。以为是图片路径错误没有这个图片，就在地址栏输入查看，是可以看到的，于是百度搜索，发现问题
在这里插入图片描述<meta name="referrer" content="no-referrer"> 在index.html中加入meta标签就可以完美解决
之后又发现还有一种解决方法

还有一种方法就是在img标签上加referrer="no-referrer"或者rel="noreferrer"

referrer策略是一种网络安全手段，在请求中会带有referrer

关于更多referrer

VUE3语法--img图片不显示 img的src动态赋值图片显示_vue3 img src 动态赋值
m0_61068088的博客
04-18 1998
【代码】VUE3语法--img图片不显示 img的src动态赋值图片显示_vue3 img src 动态赋值。
浏览器能正常访问图片,但是放到img src下就无法显示的解决方案
zms12345677的博客
12-13 716
最近发现个有意思的免费api，闲来无事想来玩一下，但是遇到了浏览器能正常访问图片,但是放到img src下就无法显示。如果你放在img标签中，referer就是当前页面url，图片服务器判断这个url不在授权范围内，不返回正常内容。在图片地址前面拼接上 //images.weserv.nl/?你直接访问图片服务器，它判断referer为null，允许你访问。通过referer开启的防盗链就存在这种情况。对方开了防盗链.......emm。
img的src地址是一个请求的方式来显示图片方法
10-20
下面小编就为大家带来一篇img的src地址是一个请求的方式来显示图片方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
图片链接直接打开显示正常，放在img标签里就加载不出来的解决方法
qq_21280835的博客
03-24 1201
中加载一个后端返回的二维码图片地址，在浏览器可以直接打开，但放到img标签就显示不出来后来查资料得知是因为图片的链接是第三方地址，所以在有些浏览器可能会不兼容，导致不显示图片，比如谷歌不行，火狐却可以。
图片地址在src里边无法加载，在浏览器地址栏可以加载的问题
学Java的小蜗牛的博客
12-20 1874
图片的url地址放到html里边无法加载，在浏览器地址栏可以正常访问 方式一：首先看下图片的url是不是http协议，是的话换成https即可； 方式二：html添加如下代码 <meta name="referrer" content="no-referrer"> 原因，https协议内不支持访问http的资源，安全性 ...
img标签中src使用网络地址 图片不显示
我的博客
03-02 6671
图片链接在浏览器地址栏直接打开就正常显示，但放在img标签的src里，浏览器却加载不出来
使用链接可以打开图片，而在img中使用src无法打开图片
monkeyHI
03-20 3421
好傻啊！！！！！！！！！！！！！！！！！！！！ 我在页面上加了一个 <!-- 将http请求转成https请求 --> <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> 我的图片路径是http，结果给我转成了https。。。。。。所以在该页面使用src打不开...
img src 本地图片_一次 Web 端大量图片同时加载卡顿问题的优化之旅
weixin_39721953的博客
12-01 715
点击上方[全栈开发者社区]→右上角[...]→[设为星标⭐]作者：苏格团队https://juejin.im/post/5cbd30e7e51d456e803516ba背景由于业务的需要，笔者最近需要实现一个大量图片同时加载的需求。在实现这个需求的过程中，笔者遇到了很多的坑，也总结了一些优化方案。这里将笔者使用或准备使用的优化方案总结一下。具体场景在描述如何解决问题，我们现在先来申明，问...
在使用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"> <
html显示不了图片，直接输入url却可以访问
RikkaTakanashi的博客
03-05 6669
初次尝试html编写，在插入图片时遇到了问题，百度了一下，大家都说时路径不正确，但经过检查，我觉得我的路径 &lt;div&gt; &lt;!--相对路径--&gt; &lt;img src="image/background.jpg" /&gt; &lt;!--绝对路径--&gt; &lt;img src="E:\webstorm\workspace\te...
img src本地图片不显示_如何保存微博的所有图片链接并下载图片到本地
weixin_39760433的博客
12-01 433
点击上方月小水长并设为星标，第一时间接收干货推送这是月小水长的第47篇原创干货对于一个爬虫，其爬取的目标不仅限于文字，图片、语音、视频均有可能，我开源的微博爬虫之话题爬虫，设定之初就是将微博内容、评论等文字形式和图片作为爬取目标的，只不过由于图片无法保存在 csv 中(不考虑 base64 编码解码这种形式，因为如果将图片 base64 编码作为结果 csv 的一列...
Img标签中src为网络地址无法显示图片问题解决
liuyi6119的博客
05-22 2758
Img无法显示网络地址图片
解决 img标签引入https 的链接，图片不显示
MySundays的博客
08-15 2107
<head> 标签区域加上： <meta name="referrer" content="no-referrer">
图片上传问题：上传到项目需要刷新才显示；部署到Server，下一次再部署以前的图片消失；
你难忘的
04-23 1272
1、在做图片上传时利用session.getServletContext().getRealPath("img/productSingle");得到的是项目部署的路径。第一次部署完之后上传图片到该文件夹可以访问，当项目更改之后第二次部署发现第一次上传的图片消失了。 2、出现第一个问题之后便采用绝对路径的方式直接将图片上传到了项目文件夹下。项目重新部署图片也不会消失，但是图片的上传并不能立刻显示，只...
富文本上传的内容中img标签的src属性丢失
青青子衿，悠悠我心
12-03 2679
在一次项目上线后，突然发现后台系统的上传图片功能出了问题。是要发布一篇文章，文章内容是以富文本的形式保存的，上传图片后发现图片显示不出来，看数据库保存的字段发现img标签没有src属性，当时就奇了怪了，因为在本地测试的时候是没有问题。然后进行远程debug发现是接收的时候就已经没有了。这个时候本地和正式产生的结果就不一样了，然后找到他们的不同点：配置文件（ps:后知后觉，一开始没想...
img的src无法访问本地盘符的图片
qq_41745284的博客
01-27 5375
Q：在本地调试代码时，发现html的img标签无法访问本地图片： <div> <img src="file:\\D:\SchoolShop_IMG\upload\headline\1.jpg"> </div> 发现img标签并无法通过file:协议访问绝对路径的本地图片，只能通过http方式请求 解决方法： 通过tomcat服务器进行转发，打开tomcat安装目录下conf文件夹下的server.xml在标签内写入： <Context path="/u
解决图片放在src上面加载不出来，但是放在浏览器地址可以访问
qq_37622750的博客
11-24 2633
在html页面加入标签，就可以解决页面加载网络图片的问题， 原因大概是网络安全的问题，别人的页面做了安全防护的问题。
img 标签引入远程图片连接无法访问，浏览器可以正常访问
daydayUp的博客
03-22 2667
img 标签显示
在jsp页面<img/>标签引用本地路径下的图片，图片不会显示，需要在tomcat中配置虚拟路径...
weixin_30341735的博客
09-11 633
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&...
vue动态绑定的后台返回图片链接加载不出来
最新发布
02-19
### Vue 动态绑定后台返回图片链接加载失败解决方案 在 Vue 项目中遇到动态绑定后台返回的图片链接无法正常加载的情况，通常是因为 Webpack 对静态资源路径处理不当所致。当使用相对路径引用静态资源时，Webpack 并不会自动识别这些路径作为模块依赖[^2]。 为了使动态获取的图片能够正确显示，在模板中的 `v-bind:src` 绑定表达式里应采用 `require()` 函数来引入图片路径。然而对于来自服务器端响应的数据，则需注意其格式是否符合预期以及如何适配前端框架的要求[^3]。 考虑到上述情况，以下是几种可能有效的解决办法： #### 方法一：使用 require() 如果确认图片确实存在于指定位置并且 URL 是绝对地址而非相对地址的话，可以在组件内部通过如下方式调用 `require()` 来加载图像： ```javascript // 假设这是从后端获得的一张图片URL let imageUrl = "http://example.com/path/to/image.png"; this.imageSrc = imageUrl; ``` 而在 template 中则这样写： ```html <img :src="imageSrc ? require(imageSrc) : ''"> ``` 需要注意的是此方法适用于本地开发环境下的模拟数据测试；生产环境中建议按照实际情况调整逻辑以适应不同场景需求。 #### 方法二：确保正确的 MIME 类型和服务端配置 有时即使客户端代码编写无误，但由于服务端未设置好相应的 Content-Type 导致浏览器拒绝渲染某些类型的文件。此时应该检查 HTTP 请求头信息并验证服务器是否已正确定义了 image/* 形式的媒体类型给对应的资源[^4]。 #### 方法三：修正 Vuex Store 初始化顺序问题 另外有报告指出由于 Vuex store 的初始化时机不对也可能引发类似的 bug 。具体表现为刷新页面之后菜单栏状态丢失等问题 ，这可能是由于应用实例创建过程中插件注册次序错误所引起的副作用之一[^5]。虽然这个问题看起来跟当前主题关系不大，但在排查期间也不妨留意一下是否存在类似隐患。 综上所述，针对 vue 动态绑定后台返回图片链接加载失败的现象可以从多个角度入手分析原因，并采取相应措施加以修复。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值