uni-app iOS H5上的image标签无法正常展示base64图片

uni-app iOS H5上的image标签无法正常展示base64图片

操作步骤：

ios在safari上打开vue界面，对应image标签未显示图片。

预期结果：

ios在safari上打开vue界面，对应image标签和Android上表现一样，可以显示图片。

实际结果：

ios在safari上打开vue界面，对应image标签不展示base64的图片。

bug描述：

使用image标签加载图片，给src属性设置图片的base64编码，在Android，google浏览器上均可以显示图片，在ios上图片不显示。 备注：base64字符串前缀data:image/png;base64,去掉和不去掉，ios都无法展示该图片。

base64如下：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAAA8CAMAAAD48GC1AAAAP1BMVEUAAABWrT1Uqztgt0dVrDwnfg5cs0MedQUmfQ03jh4qgRE/liYxiBgheAhFnCwthBRdtERBmChJoDAedQU4jx8K/+9dAAAAAXRSTlMAQObYZgAAAmJJREFUeJzsmmGPszAIx8uSxct0i4vf/7s+eTanUKCltV1r7v734qJW+BUpcMm5Nro08ntEl0t31BBf0h8zGKi7UyfMS2uADC3LUih8YxErNi2FEnUca1ND4CpXlZnhpbo+Sus/8Omo37Qng17VNbUKVwP6nXUlLCs2+G5ygw+btiNzmFxm8e7mHk35tRL1SbbL3GSYDb1zFFx4m95av2mizfgr0oLB7oK5BApACcBBuAeZtghSuIfBTM2ygVwwZhD9pRB/3obXj3Nu2qitzG7EsaY4q3FgTxXoKDIuJh9uN02TGfbDTIYwnhsUWsXzv0gAmt2a0qvgiNxJgSZPFWY5y0VEcStZtdvHe19RP+ghL4pCnksb0ZtwZisQkgOfQyCpLXkUj4OVOrNPgvOLGT41JM6snPhEwI4DWqNUzMxg+6AOfWQxOfzGx3OeH1i/gBCADO49e8GvgmJusMaHDCjMmpOdOp1b3D+IxS70hfVAx5y9A3F4gsUnFDWXAERoW2S52lXThx3pk8OaI7DOHtq7+HfUd+j57vC15p62CWQDIJx0frYamnrk+ac63O9xaqUkRWJHi6I+ng5oVRRllTXSwMfqhPUB5m3+zCvMMW3xMsREaNnKyiHQYMrJYDthyuDzaSsJU194fV2cgGYEIU1arXUT7s3zTg2evgqn6HYTqclVX8ROifSfWujRGiBDj0cN6p8KNrGqMP/Upq6hMzKfVtfWABm6Xo3Uc22SFFmZ566ojZob/P9BgdRdli9Tm1M3pDNG+ndJGWCf3+ZIkfyngns++6aWb3fN/CemfwEAAP//UN4GZduWe0YAAAAASUVORK5C
项目信息 描述
产品分类 HTML5+
HBuilderX版本号 3.0.7
手机系统 iOS
手机系统版本号 iOS 12.4
手机厂商 苹果
手机机型 iphone 6 plus
打包方式 云端

更多关于uni-app iOS H5上的image标签无法正常展示base64图片的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

HX基座跑的img标签是可以显示base64的图片，看你的描述是Safari上不能显示是吗？为啥要跑在safari上？ 是怎么在safari上打开的vue界面的？

更多关于uni-app iOS H5上的image标签无法正常展示base64图片的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个iOS Safari浏览器对base64图片格式的兼容性问题。建议尝试以下解决方案：

  1. 确保base64字符串格式正确，保留data:image/png;base64,前缀

  2. 检查图片大小是否超过iOS Safari的限制（建议控制在2MB以内）

  3. 尝试使用以下格式转换base64字符串：

// 移除可能存在的换行符和空格
const cleanBase64 = base64Str.replace(/\s/g,'');
  1. 如果问题仍然存在，可以尝试将base64转为Blob对象后使用URL.createObjectURL()来显示：
function base64ToBlob(base64) {
  const parts = base64.split(';base64,');
  const contentType = parts[0].split(':')[1];
  const raw = window.atob(parts[1]);
  const uInt8Array = new Uint8Array(raw.length);
  
  for (let i = 0; i < raw.length; ++i) {
    uInt8Array[i] = raw.charCodeAt(i);
  }
  
  return new Blob([uInt8Array], {type: contentType});
}

const blob = base64ToBlob(base64Str);
const imgUrl = URL.createObjectURL(blob);
回到顶部