【报Bug】image 组件使用 widthFix 在编译 H5 ，切换 tab 时报 bug

分类：uni-app

bug反馈

产品分类： uniapp/H5

PC开发环境操作系统： Mac

PC开发环境操作系统版本号： macOS Monterey 12.0.1

浏览器平台： Chrome

浏览器版本： 100.0.4896.75

项目创建方式： CLI

CLI版本号： ^3.0.0-alpha-3040120220308001

示例代码：

    <view v-for="(item) in listData" :key="item.id" class="item cc-hairline--bottom">  
          <view class="list-item">  
            <view class="item-image">  
              <image class="full-100" :src="item.img_url" mode="widthFix" />  
            </view>  
          </view>  
        </view>

操作步骤：

编译 dev:h5 使用 image 组件 mode="widthFix", 切换 tab，再切换回来

预期结果：

能正常切换回来，且界面渲染正常，如 mode="aspectFit" 时效果

实际结果：

切换回来，界面渲染失败，控制台报错如附件 2截图

bug描述：

编译 dev:h5，使用image 组件 mode=widthFix，刷新渲染没错误，但在切换 tab 再切换回来，报 bug

经测试排查 mode 改为 aspectFit ，再切换 tab，就没问题

2022-04-10 21:26 负责人:无分享

2 个回复

DCloud_UNI_Anne

请找出来具体原因后提供可复现bug的最小化demo（上传附件），让我们及时定位问题，及时修复。【bug优先处理规则】https://ask.dcloud.net.cn/article/38139

cloud_yan (作者)

最小化 demo 如截图

该问题目前已经被锁定, 无法添加新回复

【报Bug】image 组件使用 widthFix 在编译 H5 ，切换 tab 时报 bug

示例代码：

`<view v-for="(item) in listData" :key="item.id" class="item cc-hairline--bottom"> <view class="list-item"> <view class="item-image"> <image class="full-100" :src="item.img_url" mode="widthFix" /> </view> </view> </view>`

操作步骤：

编译 dev:h5 使用 image 组件 mode="widthFix", 切换 tab，再切换回来

预期结果：

能正常切换回来，且界面渲染正常，如 mode="aspectFit" 时效果

实际结果：

切换回来，界面渲染失败，控制台报错如附件 2截图

bug描述：

2 个回复

公告

相关问题

【报Bug】image 组件使用 widthFix 在编译 H5 ，切换 tab 时报 bug

示例代码： <view v-for="(item) in listData" :key="item.id" class="item cc-hairline--bottom"> <view class="list-item"> <view class="item-image"> <image class="full-100" :src="item.img_url" mode="widthFix" /> </view> </view> </view>

操作步骤： 编译 dev:h5 使用 image 组件 mode="widthFix", 切换 tab，再切换回来

预期结果： 能正常切换回来，且界面渲染正常，如 mode="aspectFit" 时效果

实际结果： 切换回来，界面渲染失败，控制台报错如附件 2截图

bug描述：

与内容相关的链接

2 个回复

公告

相关问题

示例代码：

`<view v-for="(item) in listData" :key="item.id" class="item cc-hairline--bottom"> <view class="list-item"> <view class="item-image"> <image class="full-100" :src="item.img_url" mode="widthFix" /> </view> </view> </view>`

操作步骤：

编译 dev:h5 使用 image 组件 mode="widthFix", 切换 tab，再切换回来

预期结果：

能正常切换回来，且界面渲染正常，如 mode="aspectFit" 时效果

实际结果：

切换回来，界面渲染失败，控制台报错如附件 2截图