Vue---把后端返回的img标签处理成可预览图片

后端返回的文本都是带html的标签，其中img图片点击时是不会有预览效果的

</p>\n<p><img src=\"https://img2018.cnblogs.com/blog/1066844/201810/1066844-20181016104201116-766887489.png\" alt=\"\"/></p>\n<p>源码如下：</p>\n<div class=\"cnblogs_code\"><img id=\"code_img_closed_79938da4-4a23-42ea-bac6-3bc8a9675fe4\" class=\"code_img_closed\" src=\"https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif\" alt=\"\"/><img id=\"code_img_opened_79938da4-4a23-42ea-bac6-3bc8a9675fe4\" class=\"code_img_opened\" style=\"display: none\" src=\"https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif\" alt=\"\"/>\n<div id=\"cnblogs_code_open_79938da4-4a23-42ea-bac6-3bc8a9675fe4\" class=\"cnblogs_code_hide\">\n<pre><span style=\"color: #0000ff\">class</span> SpringBootBanner <span style=\"color: #0000ff\">implements</span><span style=\"color: #000000\"> Banner {\n\n    </span><span style=\"color: #0000ff\">private</span> <span style=\"color: #0000ff\">static</span> <span style=\"color: #0000ff\">final</span> String[] BANNER = { \"\"<span style=\"color: #000000\">,\n            </span>\"  .   ____          _            __ _ _\"<span style=\"color: #000000\">,\n            </span>\" /\\\\\\\\ / ___'_ __ _ _(_)_ __  __ _ \\\\ \\\\ \\\\ \\\\\"<span style=\"color: #000000\">,\n            </span>\"( ( )\\\\___ | '_ | '_| | '_ \\\\/ _` | \\\\ \\\\ \\\\ \\\\\"<span style=\"color: #000000\">,\n            </span>\" \\\\\\\\/  ___)| |_)| | | | | || (_| |  ) ) ) )\"<span style=\"color: #000000\">,\n            </span>\"  '  |____| .__|_| |_|_| |_\\\\__, | / / / /\"<span style=\"color: #000000\">,\n            </span>\" =========|_|==============|___/=/_/_/_/\"<span style=\"color: #000000\"> };\n\n    </span><span style=\"color: #0000ff\">private</span> <span style=\"color: #0000ff\">static</span> <span style=\"color: #0000ff\">final</span> String SPRING_BOOT = \" :: Spring Boot :: \"<span style=\"color: #000000\">;\n\n    </span><span style=\"color: #0000ff\">private</span> <span style=\"color: #0000ff\">static</span> <span style=\"color: #0000ff\">final</span> <span style=\"color: #0000ff\">int</span> STRAP_LINE_SIZE = 42<span style=\"color: #000000\">;\n\n    @Override\n    </span><span style=\"color: #0000ff\">public</span> <span style=\"color: #0000ff\">void</span> printBanner(Environment environment, Class&lt;?&gt;<span style=\"color: #000000\"> sourceClass,\n            PrintStream printStream) {\n        </span><span style=\"color: #0000ff\">for</span><span style=\"color: #000000\"> (String line : BANNER) {\n            printStream.println(line);\n        }\n        String version </span>=<span style=\"color: #000000\"> SpringBootVersion.getVersion();\n        version </span>= (version != <span style=\"color: #0000ff\">null</span>) ? \" (v\" + version + \")\" : \"\"<span style=\"color: #000000\">;\n        StringBuilder padding </span>= <span style=\"color: #0000ff\">new</span><span style=\"color: #000000\"> StringBuilder();\n        </span><span style=\"color: #0000ff\">while</span> (padding.length() &lt;<span style=\"color: #000000\"> STRAP_LINE_SIZE\n                </span>- (version.length() +<span style=\"color: #000000\"> SPRING_BOOT.length())) {\n            padding.append(</span>\" \"<span style=\"color: #000000\">);\n        }\n\n        printStream.println(AnsiOutput.toString(AnsiColor.GREEN, SPRING_BOOT,\n                AnsiColor.DEFAULT, padding.toString(), AnsiStyle.FAINT, version));\n        printStream.println();\n    }\n\n}</span></pre>\n</div>\n<span class=\"cnblogs_code_collapse\">View Code</span></div>\n<p>对于banner的输出可以做如下修改，代码如下：</p>\n<p>banner.txt</p>\n<div class=\"cnblogs_code\">\n<pre><span style=\"color: #000000\">                   _ooOoo_\n                  o8888888o\n                  </span>88\" . \"88<span style=\"color: #000000\">\n                  (</span>| -_- |<span style=\"color: #000000\">)\n                  O\\  </span>=  /<span style=\"color: #000000\">O\n               ____</span>/`---'\\____\n             .'  \\\\|     |//  `.\n            /  \\\\|||  :  |||<span style=\"color: #008000\">//</span><span style=\"color: #008000\">  \\</span>\n           /  _||||| -:- |||||-<span style=\"color: #000000\">  \\\n           </span>|   | \\\\\\  -  <span style=\"color: #008000\">//</span><span style=\"color: #008000\">/ |   |</span>\n           | \\_|  ''\\---/''  |   |<span style=\"color: #000000\">\n           \\  .</span>-\\__  `-`  ___/-. /<span style=\"color: #000000\">\n         ___`. .</span>'  /--.--\\  `. . __\n      .\"\" '&lt;  `.___\\_&lt;|&gt;_/___.'  &gt;'\"\".\n     | | :  `- \\`.;`\\ _ /`;.`/ - ` : | |<span style=\"color: #000000\">\n     \\  \\ `</span>-.   \\_ __\\ /__ _/   .-` /  /\n======`-.____`-.___\\_____/___.-`____.-'======\n                   `=---=<span style=\"color: #000000\">'\n</span>^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^<span style=\"color: #000000\">\n         佛祖保佑       永无BUG</span></pre>\n</div>\n<p>application.yml</p>\n<div class=\"cnblogs_code\">\n<pre><span style=\"color: #000000\">spring:\n  banner:\n    charset: UTF</span>-8<span style=\"color: #000000\">\n    location: banner.txt</span></pre>\n</div>\n<p>application</p>\n<div class=\"cnblogs_code\">\n<pre><span style=\"color: #000000\">@SpringBootApplication\n</span><span style=\"color: #0000ff\">public</span> <span style=\"color: #0000ff\">class</span><span style=\"color: #000000\"> Application {\n    </span><span style=\"color: #0000ff\">public</span> <span style=\"color: #0000ff\">static</span> <span style=\"color: #0000ff\">void</span><span style=\"color: #000000\"> main(String[] args) {\n</span><span style=\"color: #008000\">//</span><span style=\"color: #008000\">        SpringApplication application = new SpringApplication();\n</span><span style=\"color: #008000\">//</span><span style=\"color: #008000\">        application.setBannerMode(Banner.Mode.OFF);\n</span><span style=\"color: #008000\">//</span><span style=\"color: #008000\">        application.run(Application.class, args);</span>\n        SpringApplication.run(Application.<span style=\"color: #0000ff\">class</span><span style=\"color: #000000\">, args);\n\n    }\n}</span></pre>\n</div>\n<p>程序启动后如下：</p>\n<p><img src=\"https://img2018.cnblogs.com/blog/1066844/201810/1066844-20181016104519285-2131955741.png\" alt=\"\"/></p>\n<p>更高级的操作，后续再进行研究</p>\n<p> </p>"

现在需求是把图片进行可以预览处理（在这里用vant的ImagePreview组件）

1.先把文本通过v-HTML渲染（articles.content就是后端返回的文本标签）

       <div
          class="article-content markdown-body"
          ref="articleContent"
          v-html="articles.content"
        ></div>

2.引入vant的图片预览组件

import { ImagePreview } from 'vant'

3.封装图片预览函数（在哪里调用自己决定）

    imgpreview() {
      // 得到所有的img节点
      const articleContent = this.$refs.articleContent
      const imgs = articleContent.querySelectorAll('img')
      const images = []
      imgs.forEach((img, index) => {
        images.push(img.src)
        console.log(images)
        img.onclick = () => {
          ImagePreview({
            // 预览的图片地址数组
            images,
            //图片下标
            startPosition: index,
          });
        }
      })
    }