l***@sina.com
l***@sina.com
  • 发布:2023-06-20 00:24
  • 更新:2023-06-20 06:42
  • 阅读:281

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

分类:uni-app

后端返回值图片是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 负责人:无 分享
已邀请:
LAO_WUUAN

LAO_WUUAN

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

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

<img :src="imageData" @error="handleError">


当加载错误时,`handleError`函数会被触发,您可以在该函数中给出友好的错误提示。
  • l***@sina.com (作者)

    很感谢恢复



    1. base64 无错误,复制出来均可显示。 用在线工具转换也可以显示

    2. base64 转换回来对比后也是一致得

    3. 现在得情况是没设置宽度得时候,每次显示均正常,设置了宽度反而会复现上述情况

    4. v-if 用过,用来判断图片是否加载完成,加载完成就是显示图片,没加载就是显示一张加载中得离线图片。离线图片显示正常,在线图片加载完成后,显示空白

    5. @error 未捕捉到任何异常

    2023-06-20 11:08

要回复问题请先登录注册