微信小程序中图片高度为0的问题

最新推荐文章于 2022-09-28 14:11:38 发布
最新推荐文章于 2022-09-28 14:11:38 发布
阅读量2.9k 收藏 1
点赞数 1
分类专栏： 微信小程序 文章标签： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yehuaner33/article/details/82416449
版权

话说多说，直接上问题。

在微信小程序中，有时候图片加载出来高度是0，但是也有宽度，控制台的wxml中图片也有，最后才知道要给page加个高度，可是当page高度添加上去之后，无论page的值写多少图片大小都不变，找了半天才发现是在app.wxss中已经给全局定义了image的高度，把app.wxss中关于image的给删掉之后，图片就可以正常显示，此时不用加page也可以显示

xiaoShengSanYue
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
微信小程序获取自定义tabbar的高度总是为0
m0_37543276的博客
09-17 673
我分别在ready()中打印rect，在attached()中打印rect，均显示rect.width = 320,rect.height = 0。同时，rect.top=0,rect.bottom=0.我使用custom-tab-bar自定义了一个tabbar，里面的内容使用的vant weapp样式，显示和切换正常。我把鼠标放在上图红圈中，左侧显示该view尺寸为320*0，也就是tabbar的宽度为320，高度为0。请大神帮忙看看，问题出在哪里？
微信小程序 本地图片按照屏幕尺寸处理
08-29
微信小程序本地图片按照屏幕尺寸处理是指在微信小程序中，如何将本地图片按照屏幕尺寸进行处理，以便图片能够在不同屏幕尺寸的设备上正确地显示。本文将详细介绍微信小程序本地图片按照屏幕尺寸处理的实现步骤和相关...
小程序设置图片height:auto,但是图片不显示,实际是高度为0
迪奥乔斯达的博客
08-18 3528
刚才在调的时候发现一个图片怎么都出不来,路径是对的 但是就好像消失了,看了下调试器里面的 显示图片高度为0 看了下wxss里的width: 50px;height: auto; height:auto;去掉 在<image>标签里加一个mode="widthFix"属性就行了 ...
微信小程序页面加载时获取image高度的bug
pfli666的博客
09-24 1461
开发微信小程序时，有时会遇到页面加载时动态设定某view（比如scroll-view）高度的问题。如果该view上面有image且该image设置了widthFix，这时使用boundingClientRect()取image高度就不是最终页面里显示的高度，解决方法是 在页面wxss中按比例设置image的宽和高， .device-img{ width: 100rpx; height: 2...
uniapp微信小程序内的图片需要设置(宽)高，H5和移动端不需要设置。
Xu_Lisa的博客
06-22 5497
** 主要原因是微信小程序的图片有默认的宽高，解释如下。 ** H5和移动端 下图H5和移动端的样式效果。 如图没有任何默认的宽高，因此在img标签里面只设置宽，不设置高，图片就会等比例缩放。 微信小程序端 下图是微信开发工具里的图片样式效果。 如图uniapp中的img标签被转换为微信小程序里的image标签。image标签的默认width为320px，高为240px，但我们只在uniapp上设置width，没有设置高，因此image会使用默认的height即240px，这也就导致图片没有H5和移动端
微信小程序图片保持原有图片的高度
impossible1994727的博客
04-23 1792
有一个需求需要图片等比例缩放同时保持自己的高度。 <view style="display:flex;flex-direction:row;"> <view style="flex:1"> <image src="图片路径" mode="widthFix" style="height:100%;width:750rpx"></i...
页面首次加载图片获取高度为0
weixin_47190975的博客
09-28 929
页面首次加载图片获取高度为0
微信小程序图片瀑布流布局demo
05-06
在这个“微信小程序图片瀑布流布局demo”中，我们将会探讨如何在微信小程序中实现图片的瀑布流展示，这是一种常见的网页和移动应用设计模式，尤其适用于图片分享和展示类应用。 瀑布流布局，又称为无限滚动或荷叶边...
微信小程序动态设置图片大小的方法
10-15
在微信小程序中，为了实现图片的自适应显示，开发者经常需要动态设置图片的大小。本文主要探讨了两种方法来处理这一问题，适用于那些需要按原图比例显示图片，特别是在商品详情页等场景。 首先，我们可以利用`mode`...
微信小程序 图片加载（本地，网路）实例详解
01-20
在微信小程序中，图片加载是展示内容不可或缺的一部分。本文将详细介绍如何在小程序中加载本地和网络图片，并探讨一些关于`<image>`组件的关键属性和模式。 ### 1. 加载本地图片 本地图片加载通常用于应用程序内部...
微信小程序中关于图片的适应
百岁如流富贵冷灰的博客
06-05 1100
在小程序中的&lt;image&gt;标签是有默认的高度的（240px）;这个情况在有的时候会比较尴尬。在正常的pc或者手机端开发时，图片一般都设置为：width:100%；然后让高度自适应，保持图片的宽高比。在小程序中如何实现呢?如果你要是给图片设置：height：auto；的话  那么恭喜你，图片高度直接为0了；是不是很nice？解决办法:1.首先你需要给图片设置宽度：100%；然后使用微信内...
微信小程序图片 height: auto 不生效问题
alokka的博客
08-05 1862
直接在image标签里加： mode="widthFix" 例： <image src="{{postData.iconUrl}}" class="icon" mode="widthFix"></image>
canvas踩坑之设置宽高，变为0的问题
qq_40942817的博客
03-02 1706
不细心的小伙伴可能会出现和我一样的问题，canvas明明设置宽高了，但就是画不出图像， 打印一下获取到的canvas元素，发现它的宽高都是0 <canvas id="canvas" width="300px" height="150px"></canvas> 可能你就是和我上面一个写法 这种写法是错误的，宽高不能带单位px。 要写成下面这样的 <canvas id="canvas" width="300" height="150"></canvas> 虽然
微信小程序图片高度无法撑满父容器
qq_42356513的博客
02-25 1329
问题描述 在view标签里面加image标签,view标签的宽是有的,但是高度没有,image标签的宽度我给了100%,但是我发现了一个问题,就是image标签底部跟view标签底部是有一个细小的距离的,真是奇了个大怪啊。 解决方案 外层容器view标签加个display:flex属性 ...
微信小程序中 image高度自适应
思渝崖
11-28 1882
微信小程序中 image 高度自适应 <image class="img" src="../../images/hello.png" mode="widthFix"> mode=“widthFix” 在image 标签上加上这个属性值就可以高度自适应了 ...
微信小程序解密用户信息--java解密
Jeff_pk的博客
05-31 4517
1.wx.login()方法获取code，通过code换取session_key   2.wx.getUserInfo()方法获取：     encryptedData 包括敏感数据在内的完整用户信息的加密数据     iv   加密算法的初始向量   3.java进行解密         （1）解密使用的jar包     &lt;!--微信小程序进行解密加密的用户信息 --&...
微信小程序-Image 图片实现宽度100%，高度自适应
热门推荐
zhenghhgz的博客
11-28 5万+
大家好，今天在做微信小程序的商品详情页，商品的详情是图片集合，渲染完成后发现图片加载的很不自然，如下图所示：大家发现是不是比较模糊并且有压缩，不能达到预期效果。 解决方法如下： 样式设置宽度100%.img{　　width: 100%;}添加属性 mode=”widthFix”<image class="img" src="../../images/hello.png" mode="widthF
微信小程序限制图片显示高度
最新发布
04-28
微信小程序可以通过设置图片的样式来限制图片的显示高度。具体来说，可以使用 CSS 的 height 属性来设置图片的高度，例如： ```css .image { height: 200rpx; } ``` 这样就可以将图片的高度限制在 200rpx 以内。另外，还可以使用 max-height 属性来设置图片的最大高度，例如： ```css .image { max-height: 200rpx; } ``` 这样可以让图片的高度自适应，但是不会超过 200rpx。需要注意的是，rpx 是微信小程序中的一种长度单位，可以根据屏幕宽度进行自适应缩放，详细可以参考微信官方文档。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值