使用脚手架Vue项目之解析富文本时改变其中的图片格式

做项目时遇到了这样的一个问题：

我做的是一个有关新闻的项目，做新闻详情页时使用请求的接口的数据，然后用v-html将它渲染到页面上，看上去没啥问题，但我忽视了新闻是有图片的。而富文本中已经给图片加上了width与height属性，这时用常规的方法是不能给这个图片加上你想要的样式的，一番百度后，我总结了两种方法来解决这样的情况。

<div class="content" v-html="articleList.content">

 </div>

方法：

一.对富文本使用正则替换

    getArticleList(id).then(res => {
      this.articleList = res.data
      this.articleList.content = this.articleList.content.replace(/<img/gi,
          '<img style="max-width:100%;height:auto;display:inline-block;margin:10px 
      auto;"');
    })

对请求回来的数据直接进行正则替换，加上样式 

二.在style中加样式

用脚手架创建的vue项目中的组件，默认style带有一个scoped属性，这个属性是保证style中的样式只对当前组件有用，如果在这里对富文本中的图片进行属性修改，是不起作用的。我们可以再写一个style，这里面不要写scoped，在这里给富文本中的图片的样式会有作用。

<style scoped lang="less">

</style>
<style lang="less">
.content{
  width: 100%;
  img{
    width: 100%;
  }
}
</style>