uni-app 安卓插件image标签src file传输协议问题更新src后页面不更新

开发环境	版本号	项目创建方式
Windows	Windows 11 专业版	HBuilderX

操作步骤：

复现请大佬自行尝试下

预期结果：

安卓中更改image的src能同步显示对应图片

实际结果：

实际无论安卓文件修改多少次，还是显示第一个照片

bug描述：

在组件中引用了自己做的安卓离线插件，实现身份证拍照蒙版。安卓拍完照片后存储在 "/data/user/0/com.android.simple/files/obverse.jpg"目录下，读取协议“file://”，vue页面中用

<image :src="obverseUrl" ></image>  
<script>  
export default {  
    props: {  
        obverseUrl: {  
            type: String,  
            default: ""  
        }  
    }  
</script>

gougou168 1楼

:src 强制赋值为null，再设置路径

gougou168 2楼

结贴了，老JS的缓存问题。。。H5不存在问题，安卓有页面缓存，要在图片后面跟参数去缓存。。。

bupafengyu 3楼

在 uni-app 中使用 image 标签时，如果你通过 file 协议更新 src 属性后页面没有更新，可能是由于以下几个原因：

1. 缓存问题

浏览器或 WebView 可能会缓存图片，导致即使 src 更新了，页面仍然显示旧的图片。你可以尝试在 src 后面添加一个随机参数来强制刷新缓存：

<image :src="imageSrc + '?t=' + Date.now()"></image>

2. 路径问题

确保你使用的 file 协议路径是正确的，并且文件确实存在。如果路径不正确，图片将无法加载。

3. WebView 的限制

在某些 WebView 环境中，file 协议可能会受到限制，导致图片无法正确加载。你可以尝试使用 base64 编码的图片数据来替代 file 协议：

// 假设你有一个文件路径
let filePath = 'file:///path/to/your/image.png';

// 将文件转换为 base64
uni.getFileSystemManager().readFile({
  filePath: filePath,
  encoding: 'base64',
  success: (res) => {
    this.imageSrc = 'data:image/png;base64,' + res.data;
  }
});

然后在模板中使用 imageSrc：

<image :src="imageSrc"></image>

4. 异步更新问题

如果你在异步操作中更新 src，确保在更新 src 后，Vue 的响应式系统能够检测到变化。你可以使用 this.$forceUpdate() 强制更新视图：

this.imageSrc = 'file:///path/to/your/new/image.png';
this.$forceUpdate();

5. 检查控制台错误

打开开发者工具，检查控制台是否有任何错误信息。错误信息可能会帮助你找到问题的根源。

6. 使用 `uni.chooseImage` 或 `uni.uploadFile`

如果你是从用户设备中选择图片，可以使用 uni.chooseImage 或 uni.uploadFile 来获取图片路径，并确保路径是正确的。

uni.chooseImage({
  success: (res) => {
    this.imageSrc = res.tempFilePaths[0];
  }
});

7. 使用 `uni.getImageInfo`

如果你需要获取图片的详细信息，可以使用 uni.getImageInfo：

uni.getImageInfo({
  src: 'file:///path/to/your/image.png',
  success: (res) => {
    this.imageSrc = res.path;
  }
});

uni-app 安卓插件image标签src file传输协议问题 更新src后页面不更新