在vue开发中 只要在style标签中写
<style>
img{}
</style>
给img加任何样式 在ios端不知道为什么都不显示图片 在android端却显示正常
最终想到的解决办法:
<template>
<figure>
<img src='1.png' width='100%' />
</figure>
</template>
在img标签外套一层块级元素 让img宽度设置为100% 这个块元素可以设置宽高 img会以父元素的宽度为准显示
这是前端写img标签的情况下的解决办法
当然有时候后台会使用到富文本编辑器 比如编辑一个商品详情 既有文字又有图片
后台会存储富文本编辑器生成的代码 存入数据库 当我们取出来的时候使用v-html指令展示在指定的容器内
这个时候的样式只能通过style标签控制 img如果加以限制 又会出现不显示的问题 不加限制 图片就会显示的很嚣张
这种情况就没有办法做到自适应了