ios 真机调试遇到的图片问题汇总

ios真机调试遇到的图片问题汇总。图片不显示(已解决)，base64图片过大导致页面卡住(未完美解决)。有没有大佬遇到类似问题的，救救我！😭😭

最近在用vue开发企业微信移动端项目，真机调试时，安卓、鸿蒙系统显示正常，苹果系统遇到点小问题。如下：

一、图片不显示

1. 问题描述

用vant框架做下拉刷新功能，使用自定义提示，拷贝官网demo到项目中，代码如下：

<van-pull-refresh v-model="isLoading" :head-height="80" @refresh="onRefresh">
  
  <template #pulling="props">
    <img
      class="doge"
      src="https://img01.yzcdn.cn/vant/doge.png"
      :style="{ transform: `scale(${props.distance / 80})` }"
    />
  template>

  
  <template #loosing>
    <img class="doge" src="https://img01.yzcdn.cn/vant/doge.png" />
  template>

  
  <template #loading>
    <img class="doge" src="https://img01.yzcdn.cn/vant/doge-fire.jpg" />
  template>
  <p>刷新次数: {{ count }}p>
van-pull-refresh>

<style>
  .doge {
    width: 140px;
    height: 72px;
    margin-top: 8px;
    border-radius: 4px;
  }
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

PS: 真实项目中仅修改了图片路径。
部署到测试环境，安卓、鸿蒙、windows正常显示，但ios、mac不显示。

2. 真机调试

使用mac在企业微信客户端通过调试发现，图片dom存在，但查找元素时，页面中找不到。

3. 解决办法

解决办法有两种：

• 背景图
  在图片位置放置一个div并设置好宽高，将其设置背景图片(背景图宽高设置为100%)
• img标签
  在图片位置放置一个div并设置好宽高，在其内部添加img标签(宽高设置为100%)
  也可以直接使用vant自带的van-image组件，最终会解析如上格式

二、base64导致页面卡崩

1. 问题描述

因为内网开发的限制，需要将图片处理为base64，才可以在外网展示。
ios/mac切换到图片较多的页面时，会出现卡崩的情况。其实也没有崩，得等个十来分钟才可以操作界面。(站在用户角度：和卡崩没什么区别💀💀)

2. 真机调试

在企业微信客户端通过调试发现，图片转换为base64后，体积较大，导致界面卡崩。

3. 解决办法

• 后端将图片压缩处理不超过200k

4. 新的问题

• 体积较大的图片，压缩后模糊、不清晰
• gif图片压缩到一定比例后，成为了静态图 😅🤣😂

虽然仍存在一系列新问题，但这也比页面卡住卡崩强一万倍，负责人默默地接受了这个结果。

三、总结

以上是我能够想到的一些解决办法。
base64问题，各位大佬如有更好的办法，欢迎留言支招。万分感谢！！ 🙏🙏🙏

本文首发于足各路的博客，后续会同步更新到掘金、CSDN。关注足各路、前端不迷路！