接口返回慢 图片加载失败问题

最新推荐文章于 2024-04-09 18:01:49 发布
最新推荐文章于 2024-04-09 18:01:49 发布
阅读量1k 收藏
点赞数
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46719868/article/details/131599670
版权
当后端接口响应慢，图片无法及时加载时，可以使用img标签的@error事件监听加载错误，然后在回调中设置图片的objectFit，高度，并重新赋值src以防止闪图。这种方法确保图片能正确显示，即使加载有延迟。
摘要由CSDN通过智能技术生成

在这里插入图片描述

该图片是通过后端接口返回picUrl来给img的src赋值 但是后端接口响应较慢 导致html加载完 data也没赋到值 图片加载裂开
解决办法：img标签添加@error事件获取错误信息回调
<img v-if="certificateUrl" :src="certificateUrl" class="certificate-img" @error="imageError" />

 imageError(event) {
            let img = event.target;
            event.target.style.objectFit = 'contain'; // 这个无所谓
            event.target.style.height = '646px'; // 默认设置高度
            img.src = this.certificateUrl; // url是在data中定义的
            img.onerror = null; // 防止闪图
        },

给img的src重新赋值 直到赋上为止

前端攻城狮·左大
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端性能优化-优化大量图片加载&超大图片加载(附懒加载实现方案)
LYFlied的博客
03-29 1万+
懒加载实现方案 一.大量图片加载优化方案 1.将图片服务和应用服务分离(从架构师的角度思考) 2. 图片压缩方案 3.图片懒加载 实现方案一 实现方案二 4.小图片比较多时 5.http2解决连接数限制 二、图片过大加载优化方案
imagesLoaded.js验证文章内容图片是否加载完全并实现回调的实例
chenlkissmm的博客
07-19 1022
引入js文件： &lt;script src="../../js/imagesloaded.pkgd.js"&gt;&lt;/script&gt; 对一个元素下的所有img进行监控： function loaderlistening() { //监听blogcontent下的所有img标签元素，对每一个图片的加载作出反应 $('.blogcontent').im...
img标签加载图片失效，显示本地存放默认图片
d_append的博客
02-21 932
以上是在vue中的实践代码： 1、标签上绑定@error事件 <img @error=“onerrorUrl” src=“www.baidu.com”.t=“100%”> 2、data中定义 使用require拿到静态资源图片 defaultStation: require(’@/assets/images/error.png’) 3、定义错误回调事件 method中定义错误事件 onerrorUrl () { let img = event.srcElement img.src = this.
处理图片加载中与加载失败的组件
weixin_41083122的博客
03-01 735
处理图片加载中与加载失败的组件
img-loaded:加载图像后运行回调函数
06-23
加载 img 加载图像后调用回调。 安装 使用： component install staygrimm/img-loaded 使用： var loaded = require ( 'staygrimm/img-loaded' ) ; 使用 ： npm install img-loaded 用法 加载（图像，回调） image可以是元素、css 选择器、节点列表或数组。 请注意，如果将多个图像传递给loaded则将为每个图像返回callback 。 var loaded = require ( 'img-loaded' ) ; var images = '.hidden-image' ; loaded ( images , function ( err , img ) { // img is loaded! } ) ; 测试 make test 类似的库 这些人首
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
10-16
然而，在某些情况下，尤其是当对同一个接口连续发起请求时，可能会遇到返回数据混乱的问题。这主要是由于网络延迟、请求并发控制等因素导致请求的顺序与预期不符，从而影响了前端的数据处理。本文将深入探讨这个问题...
解决vue请求接口第一次成功,第二次失败问题
10-14
如果数据没有被正确地重置或更新，那么第二次请求可能会携带错误的数据，导致接口返回错误。例如，在提供的代码片段中，`this.form`对象包含了旧密码、新密码和确认密码，如果在提交表单后没有正确地清空或重置这些...
接口回调之异步网络加载
07-27
在编程领域，尤其是移动开发和Web开发中，接口回调和异步网络加载是两个至关重要的概念，它们在实现应用程序的动态数据获取和更新时起到关键作用。本文将深入探讨这两个主题，以及它们如何协同工作来优化用户体验。 ...
Android-GlideImageView基于Glide封装的图片加载库可以监听加载图片时的进度
08-13
在Android应用开发中，图片加载库是不可或缺...`GlideImageView`的实现原理主要是通过对Glide的请求监听器（RequestListener）进行扩展，该接口提供了`onLoadStarted()`、`onResourceReady()`、`onLoadFailed()`等方法...
php写app接口并返回json数据的实例(分享)
10-19
页面中通过定义按钮点击事件处理函数，并在其中发送AJAX请求到后端接口，接口返回的JSON数据经过处理后，能够更新到页面的指定部分。 总结来说，这份文档通过一个实际的案例，详细介绍了使用PHP开发App接口的流程和...
后端接口返回近万条数据，前端渲染缓慢，content Download 时间长的优化方案
二三的博客
03-23 9383
按照上面的方法，页面初始化的时候确实比之前快了很多，大概有一倍左右。不过直接跳转到最后一页，接口还是会有些缓慢。不过，对于上万条数据，也很少有人会直接跳转到最后一页进行搜索，毕竟上面也是有筛选条件可以进行筛选的。总而言之，也算是完成了性能优化。前端性能方案有很多种，比如 SSR，只是目前暂时还未了解，以后慢慢掌握。本篇文章介绍的方法只是其中比较特殊的一种，正常来说，我内心还是比较偏向于 gzip 压缩处理的。
漫谈JSONP以及<img>的onLoad和onError事件
会开花的树
02-04 1648
利用jsonp进行跨域已经是老生常谈了。主要原理是浏览器解析标签的时候，会用script的src属性去发一个网络请求，并将response的东西当做javascript去执行。而浏览器对js脚本并没有做跨域限制。 一个简单的jsonp例子 const url = 'http://www.xxx.com/api/someThing?query=WITH_SOME_DATA&callback=
img 图片加载完成前及下载异常时的显示设置小技巧
llq886的博客
04-10 817
Image 图片资源加载失败的回调函数是onerror,图片资源加载中的回调函数是onload； 使用前端框架来调用这些函数时函数名有细微的差别： vue 项目中 img 标签资源加载失败时的监听函数写法为 @error，资源加载中的回调函数为@load， 去掉了 on; //template中 <img src="../assets/merchantOutletLogo.png" @err...
HTML img 元素无法显示 base64 图片的可能原因
热门推荐
忧郁的蛋的专栏
03-08 1万+
比如，如果使用 UTF-8 编码的 HTML 页面中包含 GBK 编码的 base64 编码图片数据，就会导致图片无法正常解码和显示。但是，在 HTML 中使用 base64 编码图片时，如果 base64 编码中存在换行符，就会导致浏览器无法正确解码和显示图片。7、跨域问题：如果 base64 编码的图片数据是从其他域名或协议加载的，可能会受到浏览器的跨域限制而无法正常显示。8、网络传输问题：在网络传输过程中，如果 base64 编码的图片数据丢失、损坏或被篡改，就会导致图片无法正常显示。
前端上传二进制格式图片数据到后端接口的实现方法
qq_39111074的博客
04-28 2306
前端上传二进制格式图片数据到后端接口的实现方法
如果在加载图片时发生错误则执行 onerror =‘‘“ 回调函数
qq_36788686的博客
07-03 608
//1.第一种方式： <img src="image.gif" onerror="myFunction()"> <script> function myFunction() { alert('无法加载图片。'); } </script> //2.第二种方式： <img title="{bookname}" onerror="this.src='http://img.wulicdn.com/images/defaultbookimage/covertimere
一个页面上有大量的图片，加载很慢，你有哪些方法优化这些图片的加载？
道阻且长，行则将至。
05-28 9272
一个页面上有大量的图片，加载很慢，你有哪些方法优化这些图片的加载？ 1、使用 Sprites 图片技术 它将一个页面涉及到的所有零星图片都包含到一张大图中去，然后利用 CSS 技术展现出来。这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了，可以减少了整个网页的图片大小，并且利用 CSS Sprites 能很好地减少网页的 http 请求，从而大大的提高页面的性能。 2、压缩文本和图片 压缩技术如 gzip 可以有效减少页面加载的时间。压缩率都可以在大小 70%左右。虽然文本压缩用
Nuxt 使用页面缓存减少服务器响应时间
最新发布
Hyung的博客
04-09 1374
Nuxt.js是Vue.js的服务端渲染（SSR）框架，可以直接在服务器端生成完整的HTML页面返回给客户端，以达到提升网站的SEO的目的。但也正是因为需要在服务器端完成生成HTML页面所需的一系列操作，使得服务器端压力较大、返回HTML时的服务器响应时间较长。本文采用页面缓存以及部分页面不使用SSR的方式来减小服务器的响应时间和压力。
img 标签加载失败监听事件
justinytsoft的博客
09-30 5570
// 图片加载错误时触发 function imgError(obj){ //替换原路径或隐藏 }
uniapp中写接口返回图片数据
09-13
### 回答1： 可以使用 uni.request 函数发起 HTTP 请求来获取图片数据。 具体方法是在 uni.request 中设置 responseType 为 'arraybuffer'，然后将请求返回的二进制数据转换为 base64 编码并赋值给图片元素的 src 属性。 例如： ``` uni.request({ url: 'http://example.com/image.jpg', responseType: 'arraybuffer', success: (res) => { let base64 = wx.arrayBufferToBase64(res.data) let imageSrc = 'data:image/jpg;base64,' + base64 this.imageSrc = imageSrc } }) ``` 在模板中，可以使用 v-bind 指令将图片元素的 src 属性绑定到 imageSrc 变量上。 ``` <template> <view> <image v-bind:src="imageSrc"></image> </view> </template> ``` ### 回答2： 在uniapp中写接口返回图片数据，可以按照以下步骤进行操作： 首先，需要在后台服务器端编写一个接口用于返回图片数据。这个接口可以是使用任何编程语言实现的，比如PHP、Node.js等。接口的功能是获取图片的路径或者图片的二进制数据，并返回给前端应用。 1. 后台服务器端编写接口的代码如下（以Node.js为例）： ```javascript const fs = require('fs'); const path = require('path'); const express = require('express'); const app = express(); app.get('/getImage', (req, res) => { const imagePath = path.join(__dirname, 'images', 'sample.jpg'); // 图片路径 // 读取图片的二进制数据 fs.readFile(imagePath, (err, data) => { if (err) throw err; // 设置响应头，指定返回的数据类型为图片 res.setHeader('Content-Type', 'image/jpeg'); // 返回图片数据 res.send(data); }); }); app.listen(3000, () => { console.log('Server is running on port 3000'); }); ``` 2. 运行上述代码，启动服务器。服务器将在3000端口监听请求。 3. 在uniapp中，可以使用uni.request方法发起请求获取图片数据。示例如下： ```javascript export default { methods: { getImageData() { uni.request({ url: 'http://localhost:3000/getImage', // 接口地址 method: 'GET', responseType: 'arraybuffer', // 设置返回数据的类型 success: (res) => { const base64Data = uni.arrayBufferToBase64(res.data); // 将返回的arraybuffer类型数据转为base64格式 this.imageData = `data:image/jpeg;base64,${base64Data}`; // 将base64格式数据赋值给前端展示的图片 } }); } } } ``` 4. 在uniapp页面中调用getImageData方法，发起请求并获取到图片数据后，将其赋值给前端展示的图片源，即可在前端页面中显示接口返回的图片数据。 通过以上步骤，就可以在uniapp中写接口返回图片数据，并在前端应用中展示图片。 ### 回答3： 在uniapp中，编写接口返回图片数据需要按照以下步骤进行操作： 首先，需要在后端服务器中创建一个接口来将图片数据返回给前端。可以使用Node.js、PHP、Java等后端语言来编写该接口。 接下来，在前端uniapp的代码中，可以使用uni.request函数来发送网络请求获取图片数据。这个函数可以发送HTTP请求到后端接口并获取返回的数据。 在uni.request函数中，需要设置请求的url为后端接口的地址，并指定请求的方法（例如GET或POST）。同时，还可以设置请求头、请求参数等信息，以便服务器能够正确处理请求。 当接收到后端返回的图片数据后，可以在前端使用uni-app提供的相关组件（如<image>标签）来展示图片。可以将接收到的图片数据赋值给该组件的src属性，从而显示图片。 在图片展示的过程中，可以根据需要对图片进行进一步处理，比如调整大小、裁剪、添加滤镜等操作。uni-app提供了丰富的组件和插件来实现这些功能。 最后，根据具体需求和业务逻辑，确定是否需要对接口进行其他的错误处理或数据处理操作。比如判断接口返回的状态码，处理图片加载失败的情况等。 总之，在uniapp中编写接口返回图片数据需要通过后端服务器创建接口、前端发送网络请求、接收数据并在前端显示图片的过程来完成。通过合理的代码编写和组件使用，可以轻松实现该功能，并为用户提供良好的使用体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值