html中的img显示固定大小并居中

replaceImg.js

export function replaceImg  ({str, width=200, height=300}) {
           str = str.replace(/(<img[^>]*>)|(<img[^>]*><\/img>)/g, function(match, capture){
                if(match.indexOf('style') < 0 ){
                  // 没有style 就添加一个
                    return match.replace(/<\s*img/, '<img style=""');
                } else {
                  // 有style 就不做处理 直接返回
                    return match
                }
            })
            console.log("增加style=\"\"后的html字符串："+str);
            str = str.replace(/<img[^>]*>/gi, function (match, capture) {
                return match.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/ig, 'style="width:100%;height:auto;margin:0 auto; display:block;"') // 替换style
            })
            console.log('htmlstr', str)
    return str
}

使用

import { replaceImg } from './replaceImg'
methods: {
    getList() {
      this.html = replaceImg({
          str: this.html,
          width: 300,
          height: 200
      })
    }
}

最后发现用css就能实现

img{
width: 300px !important;
height: 200px !important;
display: block !important;
margin: 0 auto !important;
}