vue移动端项目在ios上图片不显示问题

问题描述

vue移动端项目图片，在电脑和安卓预览都没问题，但是在ios系统上出现了图片显示不出来的问题。

原因

恕我直言(原谅我水平不足)，并没有找到原理上的问题，只找到了表面的原因，即在样式表style中写了img{}来设置图片样式

img{
  width: 130px;
  height: 130px;
}

解决方案

1. 使用figure标签把img标签包裹起来，并在img行内设置width="100%"

<figure>
  <img src="@img/btn_camera.png" alt="相机" width="100%">
</figure>

2. 给figure标签设置你想要的样式

figure{
  width: 130px;
  height: 130px;
}

3. figure标签有一个默认的margin，把它清除掉

figure{
  margin: 0;
}