v-html 样式无效，图片不显示

代码模拟：

<template>
  <article>
    <div>content1：接口返回div>
    <div class="content" v-html="content1">div>
    <div>content2：前端代码div>
    <div class="content" v-html="content2">div>
  article>
template>

<script>

export default {
  data() {
    return {
      content1: "
测试数据哈哈哈 蓝色加粗-黑色加粗 感谢您的支持。
",
      content2: "
测试数据哈哈哈 蓝色加粗-黑色加粗 感谢您的支持。
",
    };
  },
};
script>

<style lang="scss">
style>
// 

展示效果和渲染代码，如下图所示：前端使用 v-html 解析时，发现接口返回的代码（content1）样式不起作用，而且图片也没解析处理；而前端写的代码块（content2）是可以解析出来的。查看源码可以看出，content1的代码渲染错误了。

原因分析：肉眼看来，这两个数据是完全一样的，但是实际是有区别的，用比对工具查看，可看出空格是不一样的，接口返回的空格是 ，如下图所示：

v-html样式无效时，可使用::v-deep进行样式覆盖

<template>
   <div class="content" v-html="content3">div>
template>

<script>
export default {
  data() {
    return {
      content3: "测试数据哈哈哈 蓝色加粗-黑色加粗 感谢您的支持。",
  },
};
script>

<style lang="scss" scoped>
.content {
  ::v-deep .first {
    font-weight: bold;
    color: #1188ff;
  }
  ::v-deep .second {
    font-weight: bold;
  }
  ::v-deep .icon {
    width: 100%;
    margin-top: 20px;
    border: 1px solid red;
  }
}
style>

效果查看：