浅谈v-html 解析时 img图片 渲染超出边界的问题

一般来说content作为后端返回的富文本

xx.content = content.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')

这里xx是指你赋值之后的变量名

可直接在请求后写

比如：

axios.get('').then(res=>{
    data=res.data
    data.content=data.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')
  })

这样设置 max-width 也就是最大宽度为100%就可以了

如果渲染出来的图片之间有间距也就是空白的地方可以在属性里添加display:block，如下：

 detailData.content = detailData.content.replace
(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"')

换了下行这样看着舒服点

如果还是有空白，那么就需要考虑一下是不是富文本之间有空格，可以给标签添加font-size来设置：

  <rich-text nodes="{
  {d