Uniapp中的image设置height: auto不显示问题及如何解决

最新推荐文章于 2024-10-30 22:17:54 发布
最新推荐文章于 2024-10-30 22:17:54 发布
阅读量1.3k 收藏
点赞数 8
文章标签： uni-app java 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_63553261/article/details/136452388
版权
文章讲述了在APP开发中，使用imageclass标签时图片高度不显示的问题，解决方案是将模式设为widthFix，移除height属性的aut值。提示开发者在APP中应使用image标签而非img以确保图片正常显示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<image class="xxx" src="@/static/ruzhuPic.png" mode="widthFix"></image>

想要的效果高度随着宽度的变化而自适应变化，但是设置height：auto后直接不显示

解决：直接在标签内部加上mode="widthFix"，并且删除height: auto即可。

温馨提示：APP中图片要用image，用img标签不显示图片！！！！
uniapp [全端兼容] - 详细实现接入使用海康威视监控云端显示及控制功能，网站集成安装海康监控及实时监控显示、摄像头控制，实时推流、回放、放大缩小画面、视频画面截图、截屏抓拍及播放器解决延迟教程
王二红
07-18 1万+
uniapp，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，vue，海康威视，海康监控，摄像头监控，实时监控画面，海康插件，无法连接，报错，uniApp对接海康处理接口认证规则，监控实时预览和回放功能，海康api接口，安全认证，海康开放平台，官方文档，播放海康摄像头的监控视频，海康实时监控播放详细步骤，web，黑屏，视频播放，回放，视频流地址，取流协议，视频sdk播放，hik，rtsp，rtmp，hls，ws，网站，网页，h5页面，后台管理系统，对接海康监控设备
uniapp｜实现多端图片上传、拍照上传自定义插入水印内容及拖拽自定义水印位置,实现水印相机、图片下载保存等功能
最新发布
商务合作 / 项目定制 / 学习交流。个人vx：lovely_wml
05-28 8350
本文以基础视角，详细讲解如何在uni-app中实现图片上传→水印动态编辑→图片下载的全流程功能。
CSS中height：auto 属性无效
vuvivian的博客
06-29 8648
height:auto 属性无效的处理方法
uniapp image图片显示问题
qq_56144522的博客
07-31 3290
1.起初是认为在uniapp开发wx小程序是不允许采用加载本地资源的问题，发现可以在css样式中引入通过background-image：url（）中可以显示出来问题，但是通过image去引入就发现图片显示不出来，报 “图片不能从本地加载”error。*在UniApp中，相对路径的解析也会受到框架的影响，因为UniApp将代码编译成小程序代码时可能会进行一些路径的转换。在小程序中，相对路径的解析可能会受到文件结构的影响，确保相对路径的正确性。在UniApp的项目结构中，将图片文件放在特定的目录（如。
uniapp css 设置图像image height：auto失效问题
weixin_43907110的博客
08-17 1154
或display 不是行内值时 height：auto失效,导致图片height直接为0,图片显示不出来。
uniapp页面高度100%无效问题
wwwwssmas的博客
04-08 4376
用uniapp写小程序时，给页面设置背景颜色，但是设置高度百分百或者100vh都出现问题，此时可以在App.vue里设置全局css
Vue uniapp实现图片宽度100%、高度自适应的效果
qq_52099965的博客
03-26 1万+
Vue uniapp实现图片宽度100%、高度自适应的效果
uniapp中图片高度或者宽度自适应
Sylvasylva的博客
10-25 5721
uniapp图片高度自适应
uniapp swiper组件中，如何设置swiper和swiper-item，使得 image 图片居中显示，高度指定margin-bottom
03-30
2. 设置 image 图片的样式，使其在容器 div 中居中显示。 具体代码如下： ``` <div style="height: 200px; margin-bottom: 20px;"> <img src="image.jpg" style="display: block; margin: 0 auto; max-height...
鸿蒙原生APP开发之Image白块解决问题
CTrup的博客
10-30 748
在通过Image组件加载网络图片时，通常会经历四个关键阶段：组件创建、图片资源下载、图片解码和刷新。当加载的图片资源过大时，Image组件会在图片数据下载和解码完成后才刷新图片。这一过程中，由于图片下载较耗时，未成功加载的图片常常表现为空白或占位图（一般为白色或淡色），这可能引发“Image 白块”现象。为了提升用户体验并提高性能，应尽量避免这种情况。图1Image加载网络图片两种方式对比。
uni-app 组件里面获取元素宽高的实现
10-15
主要介绍了uni-app 组件里面获取元素宽高的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
uniapp遇到的问题
weixin_45888412的博客
01-13 2745
uniapp遇到的问题 scroll-view横向滚动 <template> <scroll-view scroll-x="true" class="scrollX"></scroll-view> </template> <style scoped> .scrollX{ width: 100%; overflow: hidden; /* 必须要添加才能生效 */ white-space: n
uniapp 小程序 image图片宽度固定 高度自适应
cunning_of_fox的博客
09-10 1575
【代码】uniapp 小程序 image图片宽度固定 高度自适应。
uniapp 小程序实现图片宽度100%、高度自适应的效果
cwb_2120的博客
10-14 2505
因为image组件默认是有宽度跟高度的，所以这个高度不怎么好写。通过@load事件来控制图片的高度。话不多说，直接上代码，
uniapp中如何如何让图⽚宽度不变，⾼度⾃动变化，保持原图宽⾼⽐不变
zz_ll9023的博客
01-28 1909
在上面的样式中，将图片元素的类设置为 "image-class"，这样你可以将样式应用到你的图片上。将 width 属性设置为 100%，这将使图片的宽度等于其容器的宽度。将 height 属性设置为 auto，这将使图片的高度自动调整，以保持原始的宽高比。这样设置后，图片的宽度将保持不变，高度将自动变化，同时保持原始的宽高比。在这个例子中，图片的宽度被设置为不变，高度则根据原始的宽高比自动调整。在 UniApp 中，你可以使用 CSS 来控制图片的宽度并使其高度自动调整，以保持原始的宽高比。
uni-app中image组件的基本使用
Acapplella的博客
08-04 9540
image组件的使用 属性名 类型 默认值 说明 平台差异说明 src String 图片资源地址 mode String 'scaleToFill' 图片裁剪、缩放的模式 Tips <image> 组件默认宽度 300px、高度 225px； src 仅支持相对路径、绝对路径，支持 base64 码； 页面结构复杂，css样式太多的情况，使用 im...
微信小程序使用image组件时图片不显示的一个解决方法
qq_55790899的博客
10-31 9725
图片链接可正常访问，但是使用组件时，图片不显示
【uniapp 图片展示自适应，等比例缩放】
热门推荐
qq_39236283的博客
11-11 2万+
uniapp 图片等比缩放
uniapp图片自适应_什么是ACC自适应巡航？
weixin_34478373的博客
12-07 155
在上一篇文章中，我们介绍了定速巡航，那么在这一篇文章中我们一起来看一看ACC自适应巡航系统。 首先，我们从字面上来理解这两款系统的差别。第一个：定速巡航 第二个：ACC自适应巡航。从名字上看，很多人都会觉得第二个ACC自适应巡航更高级。因为它多了“自适应”三个字。可别小看这三个字，因为这三个字说明了，这套系统能自己适应不同的路况，从而控制车辆的车速，而这一点定速巡航决不能做到。 ACC自适应巡航...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值