关于使用v-html加载富文本时，对于富文本中图片的大小处理

昨天再配合后端对接接口时，后端返回的数据中包含了一个富文本的标签，我通过v-html的方式渲染到页面上的时候，发现后端对于富文本中的图片并未作出处理，大小还是原来的大小，在看了那个富文本组件的文档，结果只有英文的，本人英语很渣，就放弃了从这里下手
于是我将解决的途径放在了我这里
解决这个办法就一个思路，就是在mounted中使用原生js通过对节点进行操作
第一步
获取到父节点，然后在获取到子节点

let DomList=document.getElementsByClassName('subject-content')[0].querySelectorAll('img')

subject-content是父节点的类名，这一步我想我大概是拿到了所有的子节点吧，然后我去看控制台看了一下

惊了，居然没有获取到，当时我就在想为什么在mounted里居然拿不到节点？后来我想到v-html是在数据更新后才拿得到，于是我切换成updated再试，果然

拿到了后面的操作就简单多了，然后我接直接上for in 去遍历，然后通过

 for(let i in DomList){
        DomList[i].style.width='60%'
}

来动态添加样式，样式生效了，但是控制台却有了报错

这个报错我熟悉，肯定是遍历的时候取的对象有问题，于是我又打印了一遍果然遍历出来的对象有问题
遍历出来的值，有一些并不是节点对象

于是我试着去判断他们的类型，但是一直出现报错，当我使用
console.log(typeof DomList[i])去打印他们的数据类型
发现他们的数据类型不同，于是我想着从数据类型下手，但是发现，我使用

DomList instanceOf Object

会报错，后来我就想有什么方法是节点有，但是他们没有的，于是试着去打印了
console.log(DomList[i].style)

有·undefined就简单多了于是一段修改富文本全体图片的大小的一段代码就成功了

let DomList=document.getElementsByClassName('subject-content')[0].querySelectorAll('img')
    for(let i in  DomList){
      if( DomList[i].style){
         DomList[i].style.width='60%'
      }
    }

注意事项：！！！！非常重要

1. 大小的话建议使用百分比，尽量不要使用固定的像素，这样有可能会造成图片失真的问题。
2. 不能设置高度，不能设置高度，不能设置高度，如果图片过宽设置高度反而会导致图片将整个页面撑大
3. 可以设置其他的样式
4. 这个方法会使富文本中的所有图片的大小都发生改变，如果只需要修改某个特定的图片大小，需进行特殊处理，即直接获取到那个图片的节点，然后进行操作，就没有必要遍历节点
5. 当富文本中图片过多，可能会损失一定量的性能
6. 尽量在富文本中就限制他们的图片大小
7. 这个方法也可以适用于其他标签