一代明君的小屋 - uniapp
type: channel
link: https://www.yidaimingjvn.xyz/index.php/tag/uniapp/
items: uniapp关于image和view编译为h5变形的问题

uniapp关于image和view编译为h5变形的问题
type: item
date: 2026-03-12T17:19:06+08:00
description: 问题源码： <image class="nav-back-img" src="/static/images/icons/back.png" mode="aspectFit" /> 使用uniapp编译过程遇到了编译为h5后，image和view的class样式失效变形问题,具体情况为img样式无效，view的背景只显示了半行。原因image: 编译成h5之后会变成 。这个img因为h5的关系，没有自适应效果，需要::v-deep手工处理下。view: view编译后实际上display是个line元素，受限于line元素的特性。需要处理为display: block解决方案.nav-left{ backgroud-color: rgba(255,255,255,1); display: block; } .nav-back-img { width: 48rpx; height: 48rpx; padding: 12rpx; ::v-deep img { width: 100%; height: 100%; object-fit: cover; } }