uniapp 小程序 图片出现多余边距

最新推荐文章于 2024-09-05 10:57:00 发布
最新推荐文章于 2024-09-05 10:57:00 发布
阅读量2.9k 收藏 4
点赞数 4
文章标签： uni-app 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Nancy617/article/details/118219759
版权

使用uni-app时，会发现图片下方出现不明边距，并且自己完全没有设置也找不到在哪里
其实是uni-image自带的样式导致。只需要在样式中加上

uni-image {
	display: block;
}

这样图片就正常了。

接着，我们把项目运行到微信开发者工具上，可以看到图片又出现了莫名其妙的边距。
好吧，这是小程序的image自带的样式导致……
那么我们再加上

image{display: block;}

完成～

日后有遇到其他兼容问题再来补充

Nancy617
关注
uniapp小程序wangEditor富文本图片、样式失效不显示
qq_24369959的博客
02-23 6050
项目场景： 使用Uniapp的小程序 问题描述： 使用wangEditor4的富文本编辑器，在uniapp页面中插入 出现大量不显示的问题 Web页面中的显示正常： Uniapp小程序中问题： <rich-text :nodes="introduce"></rich-text> // Uniapp代码，也可使用v-html插入html文本 原因分析： 百度了好多原因，大部分都是图片比例过大的之后将img添加上 style=“width: 100%” 的问题，我这里的原因可
详解使用uni-app开发微信小程序之登录模块
01-20
在使用uni-app开发微信小程序的过程中，登录模块是一个关键的组成部分，因为这涉及到用户授权和数据安全。微信小程序的官方更新公告表明，对于体验版和开发版的小程序，调用`wx.getUserInfo`接口将不再自动弹出授权...
小程序或uniapp开发image存在边距或者富文本中img宽度超出问题
骑着代码去流浪
03-27 2534
1，image图片存在边距 将imgae设置成display:block或者在其父级添加font-size:0; 2，富文本中img宽度超出的问题 富文本标签的父级设置font-szie:0; 将富文本的img标签添加class: data.replace(/\<img/gi, '<img class="rich_text_img" ') 设置样式： .rich_te...
uniapp中image图片有边距
m0_61848095的博客
04-15 621
使用：uni-image { display: block;
记录一下uni-app 打包小程序设置页面的安全距离
最新发布
stpzhf的博客
09-05 1083
使用css 方式解决 (这种还是比较常用的 在一个列表页面或者 底部定位按钮的时候不设置安全区域就会影响系统底部操作)第一种使用js方式解决。
UniApp 解决image背景图片下方有10rpx 的白边
weixin_50236740的博客
03-05 789
【代码】UniApp 解决image背景图片下方有10rpx 的白边。
uniapp项目总是有莫名边距去不掉
2401_84671784的博客
04-29 317
标签后的空格也会生效（很无语），检查标签后有没有空格，去掉就行。
uniapp中多个image之间有空隙处理
04-26 483
但对于我遇到的问题，样式设置稍微调整后，image之间没有出现空隙。在网上找了一些问答，有人说设置。
微信小程序使用＜image＞标签引用图片，底部总有一条白边，解决方式
如果还热爱那就一直写下去吧~
09-14 881
【代码】微信小程序使用＜image＞标签引用图片，底部总有一条白边，解决方式。
微信小程序 image跟view标签上下会有间隙
卜卦的博客
01-09 3952
原因： 图片文字等inline元素默许是跟父级元素的baseline对齐，而baseline又和父级底边有必定间距 解决方案 将图片转换为块级对象即，设置img为： display:block; ...
uniapp小程序端普通二维码，彩色二维码，艺术二维码的生成
05-17
在本文中，我们将深入探讨如何在uniapp小程序端生成普通二维码、彩色二维码以及艺术二维码。uniapp是一个跨平台的应用开发框架，它允许开发者使用一套代码库来构建iOS、Android、Web、微信小程序等多个平台的应用。...
微信小程序仿探探翻图片
07-03
在这个“微信小程序仿探探翻图片”的项目中，我们将探讨如何利用微信小程序开发工具和其特有的框架，实现类似探探应用中的图片翻动效果。 首先，我们要了解微信小程序的基本结构。一个小程序由多个页面组成，每个...
.NET 解决TabControl 页里面多余边距问题经验分享
10-28
为了解决TabControl中多余边距的问题，开发者可以通过以下两种方法来尝试解决： 方法一：继承TabControl并override DisplayRectangle属性 该方法要求开发者创建一个新的类，继承自原有的TabControl，然后重写...
uniapp textarea在iOS上的边距/高度问题
Yu_Jian_Qt的博客
06-23 630
查了半天资料，通过机型绑定样式，最后发现文档中已经说明了有配置属性。。。
【uniapp小程序】苹果手机真机某个边的边框显示不全问题
xiaotangyu7dong的博客
03-25 2338
【uniapp小程序】苹果手机真机某个边的边框显示不全问题 解决方法原创 微信小程序在苹果ios真机上如果有一排有边框的标签时，可能会出现个别边框显示不全的问题。 当标签的父容器宽度(单位rpx)÷2的值为偶数或偶数.5的时候会出现该bug,那么我们可以推到出用200.52=401,3022=604等等都会重现这个bug, 那么解决方案就来了： 1）第一种方式是设置标签父容器的宽度到无bug值，即(奇数或奇数.5)2,例如2812rpx,281.5*2rpx可以解决 2）第二种方式是补充像素单位： 步骤1
图片四周有空隙解决办法
yongyafang123的博客
03-06 644
解决办法有以下几种：亲测有效 方法一：将img设置为block;这个基本可以解决img和div下方的缝隙问题。简单快捷，推荐 方式二：设置父级div的font-size:0; 方式三：设置外层的div的line-height:0 ...
uni-image踩坑：默认下边距的处理
weixin_45648000的博客
01-02 1649
问题情况 在uniapp中使用image组件遍历出的结果如下，查证问题，都不是内外边距造成的； 直接上处理结果 在html的image标签中增加display:block； 注意：在css文件中加是无效的； <image mode="widthFix" :src="item.thumb" style="display: block;"></image> ...
简述uniapp的image标签的mode属性
qq_53114797的博客
06-26 7139
uni-app的image标签是用于显示图片的组件，而mode属性则用于设置图片的显示模式，这个也是传统 web 开发中的。Uniapp 的与传统 web 开发中的相比多了一个mode属性，用来设置图片的裁剪、缩放模式。在开发中尽量养成每一个都设置mode的习惯。可以。一般只需要使用widthFixaspectFill这两个属性即可应对绝大多数情况。即只需设置宽度自动撑起高度的图片用widthFix；需要固定尺寸设置宽高，并保持图片不被拉伸的图片用。
uni-app为什么image底部填充不满以及解决办法
青衫折扇的博客
09-25 2016
哦们这次先来看看bug图: 解决办法: image: { display: block; } 最后我们看下完美图: 问题完美解决,有什么问题请下方留言,关注我,谢谢大家的支持
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值