7***@qq.com

发布：2023-07-21 17:52
更新：2024-11-10 22:26
阅读：300

【报Bug】nvue 安卓 image mode="aspectFit" 空白部分显示异常

分类：uni-app

bug反馈

产品分类： uniapp/App

PC开发环境操作系统： Mac

PC开发环境操作系统版本号： 17

HBuilderX类型：正式

HBuilderX版本号： 3.8.11

手机系统： Android

手机系统版本号： Android 14

手机厂商：小米

手机机型：小米8

页面类型： nvue

vue版本： vue2

打包方式：云端

项目创建方式： HBuilderX

示例代码：

<template>
<view style="border: 1px solid green">
<image
src="https://images.bytiyu.net/uploads/im/20230721/202307211317255686712.jpg"
mode="aspectFit"
style="height: 250px; border: 1px solid red; border-radius: 20rpx"
/>
</view>
</template>

<script>
export default {
name: "",
data() {
return {};
},
created() {},
methods: {}
};
</script>

<style lang='scss' scoped>
</style>

操作步骤：

代码跑一下就知道了

预期结果：

拉伸去掉

实际结果：

空白部分变成了拉伸

bug描述：

按桌。nvue 中 image 组件，mode = aspectFit, 再给style加border-radius，会导致异常拉伸。

2023-07-21 17:52 负责人:DCloud_App_Array 分享

4 个回复

爱豆豆 - 办法总比困难多

没有复现你的这个问题你能提供一个demo吗？我来测试一下

y***@yuexiang365.cn

请问解决了吗

syczuan

安卓端image设置 border-radius，mode="aspectFit" ，两边在容器中显示就会出现图片异常，ios端没问题，hbuilder x 版本4.24.2024072208也会出现

2***@qq.com

我也遇到了，我说咋回事，被模糊拉伸，确实是对image 设置圆角，就会出现

要回复问题请先登录或注册

【报Bug】nvue 安卓 image mode="aspectFit" 空白部分显示异常

操作步骤：

代码跑一下就知道了

预期结果：

拉伸去掉

实际结果：

空白部分变成了拉伸

bug描述：

4 个回复

公告

相关问题

【报Bug】nvue 安卓 image mode="aspectFit" 空白部分显示异常

操作步骤： 代码跑一下就知道了

预期结果： 拉伸去掉

实际结果： 空白部分变成了拉伸

bug描述：

与内容相关的链接

4 个回复

公告

相关问题

操作步骤：

代码跑一下就知道了

预期结果：

拉伸去掉

实际结果：

空白部分变成了拉伸