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

qq252750818

已于 2022-06-30 19:41:50 修改

阅读量1.4k

点赞数

文章标签： javascript vue.js 微信小程序

于 2022-04-22 20:45:41 首次发布

本文链接：https://blog.csdn.net/qq252750818/article/details/124354576

版权

一般来说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

关注