uni-app 浏览器和APP中image组件src为空时未达到预期效果

uni-app 浏览器和APP中image组件src为空时未达到预期效果

开发环境 版本号 项目创建方式
Windows 10 HBuilderX

产品分类：uniapp/App

测试过的手机：黑鲨3 pro, 苹果8

示例代码：

<template>  
    <view >  
        <image :src="url" mode="widthFix" [@click](/user/click)="url=''" ></image>  
    </view>  
</template>  
<script>  
    export default {  
        data() {  
            return {  
                url:"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=598954815,2074626681&fm=26&gp=0.jpg",  
            }  
        }  
    }  
</script>

操作步骤：

<template>  
    <view >  
        <image :src="url" mode="widthFix" [@click](/user/click)="url=''" ></image>  
    </view>  
</template>  
<script>  
    export default {  
        data() {  
            return {  
                url:"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=598954815,2074626681&fm=26&gp=0.jpg",  
            }  
        }  
    }  
</script>

预期结果：

  • image显示为空白

实际结果：

  • image没有变化

bug描述： 如题：

<image :src="url" mode="widthFix" [@click](/user/click)="url=''" ></image>

更多关于uni-app 浏览器和APP中image组件src为空时未达到预期效果的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 浏览器和APP中image组件src为空时未达到预期效果的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个典型的uni-app中image组件数据绑定响应问题。当通过@click事件将url设为空字符串时，组件没有正确更新显示状态。

问题分析：

  1. image组件在src变为空字符串时，在某些平台可能不会立即清除已加载的图片缓存
  2. 数据绑定虽然执行了，但视图层可能没有及时响应空值的变化

解决方案：

<template>  
    <view>  
        <image v-if="url" :src="url" mode="widthFix" [@click](/user/click)="clearImage"></image>
    </view>  
</template>  
<script>  
    export default {  
        data() {  
            return {  
                url:"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=598954815,2074626681&fm=26&gp=0.jpg",  
            }  
        },
        methods: {
            clearImage() {
                this.url = ''
            }
        }
    }  
</script>
回到顶部