首页 > 其他分享 >图片连接转 base64 并在页面中如何显示

图片连接转 base64 并在页面中如何显示

时间:2024-07-02 09:01:04浏览次数:1  
标签:result base64 reader blob error 图片链接 连接 页面

图片链接改base64

// result.content图片链接
fetch("/navy" + result.content)
            .then(response => response.blob())
            .then(blob => {
              // 将Blob对象转换为Base64字符串
              const reader = new FileReader();
              reader.readAsDataURL(blob);
              reader.onloadend = () => {
                const base64data = reader.result;
                this.getDetail(base64data)  // 此函数为将图片64传入次函数进行使用上传
              };
            })
            .catch(error => console.error('获取图片失败:', error));
          
如果是连接则
<el-image
                v-else-if="item.type==='image'"
                :src="'/navy'+item.content"
                fit="fill"></el-image>

如果是base64 


<el-image
                v-else-if="item.type==='image'"
                :src= "data:image/png;base64," + res.data.imageBase64;
                fit="fill"></el-image>

标签:result,base64,reader,blob,error,图片链接,连接,页面
From: https://www.cnblogs.com/baozhengrui/p/18279202

相关文章

  • 7、 Django-路由-router-页面跳转
    概念:在实际开发过程中、一个Django项目会包含很多的app、这时候如果我们只在主路由里进行配置就会显得杂乱无章、所以通常在每个app中创建各自的urls.py路由模块、然后从根路由出发、将app所属的url请求、全部转发到相应的urls.py模块而这个从主路由转发到各个应用的路由的过......
  • 【苍穹外卖】P18通过前端页面添加员工,传过来的值为空
    漏掉了注解@RequestBodypublicResultsave(@RequestBodyEmployeeDTOemployeeDTO){//把漏掉的@RequestBody加上log.info("新增员工:{}",employeeDTO);employeeService.save(employeeDTO);returnResult.success();}重新启动项目......
  • 前端页面防止它人代码调试
    今天分享一段JS 代码片段,是防止代码被调试或篡改的基础。老规矩,先阅读代码片段并思考,再看代码解析再思考,最后评论区留下你的见解!(()=>{function ban(){   setInterval(()=>{debugger;}, 50);   try {      ban();   } catch(err){}}ban();})(......
  • 鸿蒙技术之WebSocket连接详解
    WebSocket连接详解WebSocket是一种在单个TCP连接上提供全双工通信信道的协议,它允许服务器主动向客户端推送数据,非常适合实时通信和数据交换频繁的应用场景。以下是WebSocket连接的详细步骤和知识点:1.创建WebSocket对象首先,需要通过createWebSocket()方法创建一个WebSock......
  • wifi自动连接脚本
    #!/bin/sh##Startthewifi....##Debianifupdownneedsthe/run/wifilockdirectorymkdir-p/run/wifi#自定义变量interface_dev="wlan0"wifi_name="xxxx"wifi_password="xxxx"#执行wpa_cli前先调用wpa_supplicant不然不成功,不知道为何wpa_supplicant-iw......
  • WhaleStudio 2.6正式发布,WhaleTunnel同步性能与连接器数量再创新高!
    在这个数据驱动的大模型时代,数据集成的作用和意义愈发重要。数据不仅仅是信息的载体,更是推动企业决策和创新的关键因素。作为全球最流行的批流一体数据集成工具,WhaleTunnel随着WhaleStudio2.6版本正式发布,带来了多项功能增强和新特性,性能大幅提升,连接器和功能方面也有大量更新......
  • flutter3空页面加导航
    import'package:flutter/material.dart';voidmain(){runApp(constGoWaterMyApp());}classGoWaterMyAppextendsStatelessWidget{constGoWaterMyApp({super.key});@overrideWidgetbuild(BuildContextcontext){returnMaterialApp(......
  • 小程序获取当前页面栈及应用
    前言:小程序跳转路由,会在页面栈里留下记录的,有的时候,我们就可以利用页面栈的记录来做一些便捷的操作。获取当前页面栈:varpages=getCurrentPages();console.log('pages',pages)console.log('pagesLength',pages.length)官网地址:getCurrentPages()|uni-app官网 应用:......
  • 分组 左连接 合并 SQL
     SELECTtemp.bz,sum(temp.bzsj)bzsj,sum(temp.llcl)llcl,max(temp.bzep)bzep,sum(temp.bzxscl)bzxsclFROM(selectt.BZbz,sum(t.bzsj)bzsj,sum(t.CL)llcl,max(hye.sep)bzep,sum(t.CL)/sum(t.bzsj)*60bzxsclfrom(SELECTSUM(SJZL)/1000CL,PH,G......
  • webAPI连接SQLserver,并快速建立数据模型
    首先,你需要有一个webAPI来作为Android应用和SQLserver数据库之间的中间件,创建该api在项目中导入三个NuGet包通过服务器资源管理器连接数据库,获取数据库连接的字符串 快速建立数据模型思路:通过数据库创建数据类:导入包=>打开程序包管理器控制台=>选择项目=>Scaffold-DbCont......