vue（uni-app）加载页面出现图片拉长再变正常的原因

最新推荐文章于 2024-07-05 16:09:22 发布
最新推荐文章于 2024-07-05 16:09:22 发布
阅读量2.7k 收藏
点赞数 2
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35960620/article/details/106939870
版权

再使用vue写页面样式的时候有时候你会发现一个现象就是<image>加载图片的时候回先变长然后在正常显示

 

 

这个原因是因为粗心样式里面没有给图片固定高度引起的,高度是自适应的

解决方案也很简单就是给父元素固定宽高，图片设置宽高百分之百
或者给图片加一个固定的宽高就解决了

不看一
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
uni-app框架+vue3 实现上拉加载和下拉刷新功能
共同学习，共同成长
07-27 1715
​大家好，我是码喽的自我修养！之前给大家分享了【vue2+uniapp实现上拉加载和下拉刷新功能】，然后有小伙伴@我使用vue3来实现，今天它来啦！
【第一趴】初探uni-app（uni-app发行者、uni-app推出背景、为什么选择uni-app）
热门推荐
官方推荐
11-07 4万+
聚沙成塔——每天进步一点点，大家好我是几何心凉，不难发现越来越多的前端招聘JD中都加入了uni-app 这一项，它也已经成为前端开发者不可或缺的一项技能了，所以凉哥为大家推出聚沙成塔【45天玩转uni-app】专栏，帮助大家对 uni-app 进行学习和理解，uni-app可以通过一套代码多端发行，相信你掌握本语言后无论是毕设还是求职项目都可以说是锦上添花，妥妥加分项；快来订阅专栏跟着凉哥一起来感受 uni-app 为开发者带来的劲感吧！
uni-app实现滑动查看大图功能
yyxhzdm的博客
07-27 1016
效果图： 代码： <template> <view class="uni-tab-bar"> <swiper class="uni-swiper-tab" :style="{height:swiperheight+'rpx'}" current="1"> <swiper-item class="item-swiper" v-for="item in swiperList"> ...
uniapp 微信小程序里切换页面的时候，本地加载的图片会出现先拉长后恢复正常的效果
Lyn1421的博客
06-26 573
是因为刚开始没有图片高度，图片高度是自适应的。后来改为如下就可以了。
uniapp app滑动、触摸时页面出现抖动拉伸解决
最新发布
admire_fish的博客
07-05 772
uniapp app滑动、触摸时页面出现抖动拉伸解决
小程序或uniapp实现图片加载时不拉升
helloworld963的博客
08-15 1775
2个问题的混合： 1.要解决图片加载过程中先变形，瞬间又恢复正常 尝试用height：auto可以解决 2.图片未加载时用背景色填充 就background-color：颜色 于是最终用display:none解决。 这样就ok了。 ...
uni-app 小程序：显示图片并且点击图片展示大图
程序媛的博客
06-14 1304
在页面显示一张图片，然后点击该张图片后显示大图。点击大图就可以关闭大图。其中imgpath为图片路径，imgArr为图片路径组成的数组。以上方法就是小程序实现点击小图查看大图的方法了。
uniapp开发微信小程序图片拉伸问题
m0_55258023的博客
09-06 2913
uniapp开发微信小程序图片拉伸问题
基于vue的uni-app生态——学习笔记001
qq_63690649的博客
03-14 2305
基于vue的uni-app生态——学习笔记001
uni-app登录实例的实现
10-29
uni-app是EcoApp体系下的一个开源项目，由DCloud(数字天堂)推出，它基于Vue.js语法，提供了丰富的组件和API，可以便捷地构建原生应用。HBuilderX作为uni-app的主要开发工具，集成了代码编辑、预览、打包发布等功能，...
uni-app - 将 base64 图片编码转为 Blob 本地文件路径（把base64类型的图片，转换成blob二进制文件流）适用于 uni-app / vue.js / JavaScript
王佳斌
11-26 9016
uni-app / vue.js / JavaScript 将 base64 转 Blob，uniapp app端如何将图片的base64编码转换成File对象或Blob，uni-app / vue.js / JavaScript 中拿到base64转blob对象，uniapp 图片base64格式转blob格式方法，uniapp上传图片压缩转base64码与base64转图片路径，Base64/Blob/File 图片文件转换，url、base64、blob相互转换方法，读取本地文件为Base64并转成B
H5 PhotoSwipe简单例子 vue图片拉伸放大缩放例子
11-27
H5 PhotoSwipe简单例子 H5 PhotoSwipe简单例子 H5 PhotoSwipe简单例子 H5 PhotoSwipe简单例子 自己改装成vue的例子 图片能发大缩放
uni-app小程序加载页面出现图片拉长再变正常的原因
weixin_45932157的博客
04-19 1745
在使用uniapp写微信小程序的页面样式的时候，你会发现一个现象就是加载图片的时候回先变长然后在正常显示，在pc端和app端没有问题。 这个原因是因为图片高度是自适应的，没有给固定高度。 解决方案就是给父元素固定宽高，图片设置宽高百分之百或者给图片加一个固定的宽高就解决了 ...
使用vue-cropper实现图片裁剪
qq_41792905的博客
03-18 1654
1.安装 npm install vue-cropper 2.main.js配置 import VueCropper from 'vue-cropper' Vue.use(VueCropper) 3.页面使用 <template> <!-- 图片裁剪 --> <div class="wrap"> <!-- 上传图片按钮 --> <input type="file" name="上传图片" i
H5页面加载时先放大再恢复正常
希望能找到你的答案
09-04 7600
在做H5页面时，如果主页的元素内容比较多，可能就会导致页面第一次加载时，会先放大然后在恢复正常，影响用户体验，从网上查找了一些解决办法，觉得比较近好的的有2种方式，我采用是第一种方案，如下： 方案一： 将此脚本放到body标签前，就可以解决此问题，但是有个瑕疵，还是有点闪动，效果行。 &lt;script type="text/javascript"&gt; function re...
uni 图像一瞬间的变形
birdsnotbirds的博客
04-27 776
uni 使用 image 标签时 我比较习惯使用auto属性 类似这种 <image :src="" mode="widthFix" style="width: 60px;"></image> 这样在加载的时候 会出现一瞬间的变形 我个人估计主要是自适应高度时，需要计算一下 然后就会这样 加一个height:auto 效果会好很多 但是 还是会看到一点 <imag...
uniapp图片自适应显示，不裁剪
weixin_39152200的博客
11-20 4251
先看图： 这是长图和方图的显示效果，都可以完全显示出来 上代码： html部分： <view class="question-title" style="width: 100%"> <image @load="imageLoad" :style="{'width': images.width + 'px', height: images.height + 'px'}" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/
关于图片的缩放，拉伸处理
oik_ios的专栏
08-08 1527
一、 图片拉伸  - (void)bgView
vue3在展示图片，固定容器大小，图片等比例拉伸，以及动态引入图片展示
weixin_52663662的博客
12-05 2889
在使用参数为url时，需要require()，才能识别出本地图片，注意：在使用require()的时候，必须提前声明使用引入图片的路径方式，就是必要写路径前缀require("@/...") 或者require("./...")，如果require(变量名字)会直接报错。在项目中展示图片的时候，需要指定的图片在固定好大小的容器里面展示，一般我使用 和背景图片的这两种方法展示图片，总结：固定容器大小，图片等比例拉伸展示时，使用背景图片的展示的展示方式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

不看一

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

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

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

打赏作者

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

抵扣说明：

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

余额充值