【报Bug】image标签，动态绑定 base64显示异常

分类：uni-app

base64 image bug反馈

后端返回值图片是base64，部分代码如下

<template>  
  <view class="image-box">  
    <image class="image" :src="source"  mode="widthFix" :style="`border-radius:${borderRadius}rpx`">  
    </image>  
  </view>  
</template>

        uni.request({  
          url: apipath,  
          success: res => {  
            that.source =  res.data  
          },  
          fail: res => {},  
          complete: res => {}  
        })

source 有值后，页面image标签有占位，但是不显示或显示不全

，这个时候如果在页面调试窗口修改其css则可以显示，

或者切换当前页面tab，然后切换回来即可显示

2023-06-20 00:24 负责人:无分享

2 个回复

LAO_WUUAN

可能是因为您使用的 base64 字符串有误导致 image 标签无法正常显示。您可以尝试以下几种解决方案：  

1. 确认 base64 字符串是否正确，可以在浏览器中打开一张图片，右键复制图片地址，再在网上找一个 base64 转换工具  
2. 将其转化为 base64 字符串。再将此字符串和原有的字符串进行比较检查是否一致。  
2. 检查代码中是否有对图片的宽高设置，是否合适，尝试为image标签设置宽高。  
3. 尝试使用 `v-if` 来判断图片是否加载完成，如果加载不成功则给出错误提示。  
4. 尝试使用 `img` 标签的 `onerror` 事件来捕获加载错误的情况，例如：


当加载错误时，`handleError`函数会被触发，您可以在该函数中给出友好的错误提示。

l***@sina.com (作者)

很感谢恢复
1. base64 无错误，复制出来均可显示。用在线工具转换也可以显示
2. base64 转换回来对比后也是一致得
3. 现在得情况是没设置宽度得时候，每次显示均正常，设置了宽度反而会复现上述情况
4. v-if 用过，用来判断图片是否加载完成，加载完成就是显示图片，没加载就是显示一张加载中得离线图片。离线图片显示正常，在线图片加载完成后，显示空白
5. @error 未捕捉到任何异常
2023-06-20 11:08

i***@aliyun.com

同样遇到了这个问题，到现在还没解决，开发者工具也能看到图片被加载了进来变换后 image显示白色换成img能显示，如果将base64直接写在数据里也能动态加载出来后端返回始终不行

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

【报Bug】image标签，动态绑定 base64显示异常

2 个回复

公告

相关问题

【报Bug】image标签，动态绑定 base64显示异常

与内容相关的链接

2 个回复

公告

相关问题