在Vue的项目中 用到V-html的时候经常遇到后台传来的富文本中的图片无法适应屏幕宽度的问题
在vue中解决的方法很简单 给上一个穿透选择器基本上就可以解决了
回到主题
在小程序中该如何解决这个问题呢
首先穿透选择器是肯定行不通的。
在vue中可以使用穿透选择器来改变富文本的img的原因 是因为'style'中scoped,使其样式私有化了 故改不了img的样式
在小程序中并没有设置样式私有,问题来了,又该怎么解决呢?
我使用的方法很简单,就是用replace()这个方法,替换掉后台返回的富文本中的img标签,让它在里面加上一个行内style
实现的方法很简单 使用正则表达式提取出富文本中的img直接替换就行了
废话少说 直接上代码
res.data.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto"')
前面的res.data.content换成富文本内容
