在img标签中没有写图片url但拼接了oss链接，导致接口被请求多次的bug

最新推荐文章于 2024-06-04 22:07:30 发布
最新推荐文章于 2024-06-04 22:07:30 发布
阅读量1.3k 收藏
点赞数
分类专栏： oss裁剪 bug 文章标签： oss裁剪 请求多次
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33430083/article/details/89025288
版权

文章目录

bug原因

在编写浏览记录拦截器的时候，debug发现拦截器总是执行多次，而且第二次总是没有获取到产品id参数，起初以为是项目配置的原因导致拦截器初始化了多次，但检查配置没有，debug检查两次请求拦截器的内存地址都是一样的，所以不是因为配置的原因导致的后来在controller层断点才发现是因为接口被多次请求，然后猜测可能是页面上有哪些地方重复调用品牌详情接口了，通过F12看控制台的Network
在这里插入图片描述
发现品牌详情接口被多次请求，除了第一次以外，后边的请求拼接的参数是图片oss裁剪的链接。

  • 原因是因为在测试阶段添加的一些测试数据没有图片，在页面渲染数据的时候图片链接没有进行非空判断直接写死了oss裁剪地址导致的，在img标签里以问号开头就会默认拼接当前页面路径，然后页面在加载img中的资源时又重新请求了接口导致的
    在这里插入图片描述

解决办法

在渲染img的src路径时添加判断图片链接为空时不添加oss裁剪

只是学习学习
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端js上传图片到阿里云OSS（Vue）
m0_49774517的博客
12-01 971
首先引用oss的SDK <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script> vue中（在App.vue文件下） mounted() { const oScript = document.createElement("script"); oScript.type = "text/javascript"; oScript.src = "https
ios-OSS图片处理, 图片链接拼接缩放参数, 图片缩放.zip
07-11
开发者可以通过设置这些配置，确保图片在缩放过程中不会失真，同时满足应用的性能和显示需求。 4. iOS集成阿里云OSS SDK： 项目可能包含了iOS SDK的集成步骤和示例代码，用于与阿里云OSS服务进行交互。开发者需要...
阿里云 oss 图片在 img 中访问失败，浏览器中正常访问
夏已微凉、
03-12 1854
一、问题描述二、解决三、他山之石 一、问题描述 在网站中的 img 标签中不能正常显示图片信息 但是 把图片地址直接 放在 浏览器 中能 正常访问。 二、解决 设置 防盗链 把自己的 网址 加到 Referer 白名单中 三、他山之石 OSS防盗链配置及常见错误排查方法 ...
img标签突然发送请求问题
最新发布
元元猿的博客
06-04 124
在做项目过程中突然出现一个发送请求的报错404，一直找不到哪里调的这个接口，后来将代码一段一段注释测试出 是img标签导致发送请求。在数据接口未返回数据前，img的src被初始化为一个空对象，导致调用当前路径+object。img的src设置一个初始值，或者在数据未返回前，不设置img标签的src属性。img的src为空或者为#时，都会发起一次请求，浏览器会用当前路径发起一次请求。
访问url图片并上传oss图片显示不完整问题解决
安藤青司的博客
04-19 1943
问题：在之前通过链接上传图片的时候，都是先获取inputStream流，然后通过available()方法获取文件大小。但是通过这种方法获取到的文件大小是不准确的，因为这个时候文件还没有读取完全，所以获取到的文件大小是不完全的。 所以导致上传的文件只显示了一半不到。 解决方法： 在使用oss上传时需要传文件大小的参数,方法： objectMetadata.setContentLength(file.length())。 URL url = new URL(post.
项目中的图片路径为什么自动拼上了域名端口
NOyesNONO_的博客
06-07 2389
背景：前端的dist包在后端的resource/static里 这里的src路径，是由后端返回的值，是以sys开头的地址，在控制台中发现，自动补全了前边的http://域名/(项目名/)，并且直接点击连接是可以访问的 经查询：有网友说是：src的连接若不是http, https, ftp…等开头的都会被判断为相对路径，实际导向时就会被加上http://域名/(项目名/)另外，如果想用绝对路径，需要在路径前加上，如file:///D:/…其他网友问的这个问题里边有这个答案...
解决阿里云OSS使用URL无法访问图片的两种方法
08-18
1. **XML代码显示**：当尝试通过URL访问OSS存储的图片时，浏览器可能返回XML错误代码，这通常是由于Bucket权限设置不当导致的。 2. **自动下载而非显示**：另一种情况是，图片内容不是在浏览器中显示，而是被当作...
制作的定时多次批量上传本地文件到阿里云OSS存储，Java脚本后端服务自动执行
05-24
自己制作的可按需求定时每分钟、每小时、每天多次批量上传本地文件到阿里云OSS存储，Java脚本后端服务自动执行，只需更改账号AccessKey和指定目录即可，递归扫描上传指定目录文件，整体流程有不懂环节可私信我
java获取网络图片上传到OSS的方法
08-26
在本文中，我们将详细介绍如何使用Java获取网络图片并上传到OSS（Object Storage Service）。该方法具有很高的参考价值，感兴趣的小伙伴们可以参考一下。 获取网络图片 获取网络图片是将图片从网络上下载到本地的...
小程序上传一张或多张图片到阿里云OSS
03-29
(此图片来源于网络，如有侵权，请联系删除! ) 效果图    一.准备工作 1.登录阿里云服务器配置需要的参数AccessKeySecret和OSSAccessKeyId。 (此图片来源于网络，如有侵权，请联系删除! ) 2.Base64,hmac,sha1,...
从后台获取图片流（验证码）加载多次问题
twinkle的博客
11-17 1755
如果是像我这样引用二维码，每一次点击都会加载两次的话，那就是一下的问题造成的： 其实说起来也简单，就是用了el-image这个标签，自己想偷个懒，仅此而已。 如果使用el-image作为来显示图片标签的话，那就会加载两次，一开始我还以为是先请求一次看后台是否响应，然后再请求一次呢，结果发现大跌眼镜。 解决方法： 把el-img改成普通的image就可以了，结果如下： 欢迎讨论为啥会加载两次...
OSS接口获取的图片压缩大小 简单好用直接在src获取的地址后面拼接
weixin_48920798的博客
12-29 8097
之前做小程序的时候，后台老哥给了一些在线图片让我放进去，考虑到图片有可能太大，加载的时候图片过大加载时间过长影响用户体验，然后后台老哥就给我分享了一个阿里的在线图片压缩的方法，直接在取到的src地址后面拼接。 ?x-oss-process=image/resize,m_fill,h_200,w_300 例如 <image :src=item.imagePath+compress" mode=""></image> data() { return { compress:'
img图片src的引入
没时间
07-02 2497
场景 在普通适合可以引用本地的图片路径，但是循环使用就可能遇到问题 普通使用 <img src="../../image/creatHY.png" alt=""> 本次使用环境是vue，在循环中使用 html <div class="body-box"> <div class="img-item" v-for="(item,index) in imgList" :key="index"> <img :src="item.
【React】为img标签的src请求添加自定义头部，添加token，实现前端带身份向后端请求图片
热门推荐
29的博客
12-03 1万+
目录应用场景尝试解决一：尝试解决二：总结： 应用场景 问题：前端写入指定的img标签和src属性，请求不了后端图片。 原因：401，UnauthorizedError，因为前端中的src属于普通的get请求，不带自定义header，而后端有对每个请求都进行身份验证，最终返回 { status: 1, msg: "TOKEN ERROR" } 前端请求头中找不到 Authorization: Bearer token.... 那请求的接口都有对axios进行拦截，但是img标签的src不经
前端拦截Image的src并返回原生对象
weixin_43192572的博客
06-29 2355
做框架的时候因为跨域问题，需要将用户的请求目标进行hook，拦截用户代码的Image.src操作并重定向到自己的url进行代理访问。为此进行了一些研究。 可能的解决方案 利用Proxy包装并返回Proxy，通过handler拦截。 利用Object.defineProperty监听变化并拦截 利用Proxy方法拦截有个弊端，由于返回的是Proxy对象，虽然能够拦截src并进行修改，但是将无法通过drawImage绘制到Canvas上。 正常的绘制方法： let canvas2d = document.c
img标签请求拦截_《HTML常用标签》
weixin_31759799的博客
01-09 1128
（一）a 标签的用法 重要属性：href、target 等等。作用：href 是超级引用，相当于建立一个超链接，href可以跳转外部页面，打开内部锚点，发送邮件，打电话等等。target 是指定在一个窗口打开页面。（二）img 标签的用法作用：发出一个get请求，然后展示图片属性：alt 用来显示文字， height 高，width宽 ，scr图片地址响应式：max-width:100%（三）t...
oss 上传图片名有中文在 url 中会转码，怎么处理成中文
03-23
在 URL 中使用中文字符时，需要进行 URL 编码，否则会出现乱码或无法识别的情况。对于 OSS 上传图片名中包含中文的情况，可以使用 Java 中的 URLEncoder 类对图片名进行编码，然后再将编码后的字符串作为 URL 的一...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值