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,
          });
        }
      })
    }

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
对于vue-element-admin后端改造,你可以按照以下步骤进行操作: 1. 首先,你需要在服务器上使用Node.js启动vue-element-admin,默认是9258端口。这可以通过在命令行中进入vue-element-admin项目目录,然后运行`npm run dev`命令来实现。 2. 接下来,你需要使用Python的Flask框架来启动后端服务,默认是5000端口。你可以创建一个Flask应用,并在其中定义后端的API接口。 3. 修改vue-element-admin中的代码,将其后端交互功能指向Flask提供的服务。你可以在vue-element-admin项目中的`src/api`目录下找到与后端交互的文件,例如`user.js`。在这些文件中,你可以修改API请求的URL,将其指向Flask后端的对应接口。 4. 如果你需要将vue-element-admin中的模拟数据接口(mock)改为真实后端接口,你可以在vue-element-admin项目中的`src/mock`目录下找到对应的文件,例如`user.js`。在这些文件中,你可以修改接口的URL,将其指向Flask后端的对应接口。 5. 在修改后端交互功能和模拟数据接口后,你可能需要处理跨域访问的问题。由于vue-element-admin默认运行在9258端口,而Flask后端运行在5000端口,你需要在Flask应用中添加跨域访问的配置,以允许vue-element-admin能够跨域请求Flask后端的接口。 总结起来,vue-element-admin后端改造的步骤包括启动vue-element-admin和Flask后端服务、修改前端代码中的后端交互功能和模拟数据接口、处理跨域访问的问题。通过这些步骤,你可以将vue-element-admin与Python的Flask框架进行整合,实现前后端的配合工作。\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* *3* [vue-element-admin改用真实后端(python flask)数据的方法](https://blog.csdn.net/wangdandan01/article/details/103478357)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [vue-element-plus-admin整合后端实战——实现系统登录、缓存用户数据、实现动态路由](https://blog.csdn.net/seawaving/article/details/129766205)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Cirrod

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值