当前位置: 首页 > news >正文

[交互]前端展示服务端获取的图片

可以通过以下步骤从服务端获取图片:

  1. 引入axios库:在前端代码中使用axios库来发送HTTP请求。可以通过以下方式引入axios:

    import axios from 'axios';
    
  2. 发送请求:使用axios发送HTTP请求,获取图片文件的二进制数据。发送请求的代码示例:

    axios({method: 'GET',url: 'http://your-domain.com/path/to/image.jpg',responseType: 'arraybuffer'
    }).then(response => {// 将响应的二进制数据转换为Blob对象const blob = new Blob([response.data], { type: response.headers['content-type'] });// 根据Blob对象生成图片URLconst imgUrl = URL.createObjectURL(blob);// 将图片URL赋值给图片元素的src属性const imgElement = document.querySelector('#my-img');imgElement.src = imgUrl;
    });
    

    在上面的代码中,responseType设置为arraybuffer,表示响应的数据以二进制数组的形式返回。在响应成功的回调函数中,将响应的二进制数据转换为Blob对象,并根据Blob对象生成图片URL,最后将图片URL赋值给图片元素的src属性,即可显示图片。


  axios({method: 'GET',url: 'http://your-domain.com/path/to/getImage',responseType: 'blob'}).then(response => {// 将响应的二进制数据转换为Blob对象const blob = new Blob([response.data], { type: response.headers['content-type'] });// 根据Blob对象生成图片URL 将图片URL赋值给图片元素的src属性const reader = new FileReader();reader.readAsDataURL(blob);reader.onload = function (e) {imgUrl = e.target.result;// e.target.result 即为base64结果};reader.onerror = (error) => {console.log("图形加载错误");};});

在上面的代码中,responseType设置为blob,表示响应的数据以blob对象的形式返回。在响应成功的回调函数中,将响应的二进制数据转换为Blob对象,并根据Blob对象生成图片URL,最后将图片URL赋值给图片元素的src属性,即可显示图片。

以上虽然设置了blob但是根本上还是图片以二进制的形式传输的,因为所有非json格式,均可以以blob接收在转换成对应格式的图片或文件

相关文章:

[交互]前端展示服务端获取的图片

可以通过以下步骤从服务端获取图片: 引入axios库:在前端代码中使用axios库来发送HTTP请求。可以通过以下方式引入axios: import axios from axios;发送请求:使用axios发送HTTP请求,获取图片文件的二进制数据。发送请求…...

LeetCode2.两数相加

一看完题,我的想法是先算出这两个链表表示的数,然后相加,然后把这个数一位一位的分配给第三个数组,这种方法应该很简单但是要遍历三次数组,于是我就想直接一遍遍历,两个链表同时往后面遍历,把这…...

Linux编译过程与交叉编译

一.GCC由来 GCC(GNU编译器套件)是一个自由开源的编程工具集,用于编译和链接C、C和其他编程语言的程序。它由理查德斯托曼(Richard Stallman)和其他自由软件基金会(Free Software Foundation)的…...

MediaPipe+OpenCV 实现实时手势识别(附Python源码)

MediaPipe官网:https://developers.google.com/mediapipe MediaPipe仓库:https://github.com/google/mediapipe 一、MediaPipe介绍 MediaPipe 是一个由 Google 开发的开源跨平台机器学习框架,用于构建视觉和感知应用程序。它提供了一系列预训…...

为什么选择C/C++内存检测工具AddressSanitizer?如何使用AddressSanitizer?

目录 1、C程序中的内存问题 2、AddressSanitizer是什么? 3、AddressSanitizer内存检测原理简述 3.1、内存映射 3.2、插桩 4、为什么选择AddressSanitizer? 4.1、Valgrind介绍 4.2、AddressSanitizer在速度和内存方面为什么明显优于Valgrind 4.3…...

获取vue当前页面url问号后面的参数

除了使用 window.location.search 或 Vue Router 的 $route.query 来获取 URL 问号后面的参数之外,您还可以使用 JavaScript 中的正则表达式来解析 URL 中的参数部分。以下是一个示例: // 获取当前页面的完整 URL const currentURL window.location.hre…...

Linux编程之线程池的设计与实现

Linux编程之线程池的设计与实现(C98) 代码 假设服务器的硬件资源“充裕”,那么提高服务器性能的一个很直接的方法就是空间换时间, 即“浪费”服务器的硬件资源,以换取其运行效率。 提升服务器性能的一个重要方法就是…...

stm32---定时器输入捕获

一、输入捕获介绍 在定时器中断实验章节中我们介绍了通用定时器具有多种功能,输入捕获就是其中一种。 STM32F1除了基本定时器TIM6和TIM7,其他定时器都具有输入捕获功能 。输入捕获可以对输入的信号的上升沿,下降沿或者双边沿进行捕获&#xf…...

打造生产级Llama大模型服务

对于任何想要尝试人工智能或本地LLM,又不想因为意外的云账单或 API 费用而感到震惊的人,我可以告诉你我自己的旅程是如何的,以及如何开始使用廉价的消费级硬件执行Llama2 推理 。 这个项目一直在以非常活跃的速度发展,这使得它非…...

Acwing 828. 模拟栈

Acwing 828. 模拟栈 题目要求思路讲解代码展示 题目要求 思路讲解 栈&#xff1a;先进后出 队列&#xff1a;先进先出 代码展示 #include <iostream>using namespace std;const int N 100010;int m; int stk[N], tt;int main() {cin >> m;while (m -- ){string o…...

初识Docker

文章目录 Docker安装Docker简介1.什么是虚拟化、容器化?2. 为什么需要虚拟化、容器化&#xff1f;3. 虚拟化的实现方式主机虚拟化的实现方式容器虚拟化实现 4. 虚拟机和Docker的区别 Docker安装 基于Centos7进行安装 1.确认系统版本和CPU架构&#xff0c;Centos7的x86_64架构…...

HTTPS Tomcat Servlet 博客系统 软件测试的概念 Linux

第 1 题&#xff08;多选题&#xff09; 题目名称&#xff1a; 以下关于http和https说法正确的是 题目内容&#xff1a; A .http是超文本传输协议 B .https是超文本传输安全协议 C .http是明文传输 D .https是加密传输 第 2 题&#xff08;单选题&#xff09; 题目名称…...

​云南财经大学《乡村振兴战略下传统村落文化旅游设计》许少辉八一著作

​云南财经大学《乡村振兴战略下传统村落文化旅游设计》许少辉八一著作...

shopee——排序模型AUC还能涨吗?

文章目录 CBMRMultiCBMRSample Weight Assignment多任务推荐模型 CBMR MultiCBMR Sample Weight Assignment Click-aware Structure Transfer with Sample Weight Assignment for Post-Click Conversion Rate Estimation 每个用户的top-k 邻居每个商品的top-k 邻居平滑处理并构…...

长城网络靶场第三题

关卡描述&#xff1a;1.oa服务器的内网ip是多少&#xff1f; 先进行ip统计&#xff0c;开始逐渐查看前面几个ip 基本上都是b/s&#xff0c;所以大概率是http&#xff0c;过滤一下ip 第一个ip好像和oa没啥关系 第二个ip一点开就是 oa&#xff0c;应该就是他了。 关卡描述&a…...

Java“牵手”虾皮商品列表页数据采集+虾皮商品价格数据排序,虾皮API接口申请指南

虾皮商城是一个在线电子商务平台&#xff0c;总部设在新加坡&#xff0c;隶属于Sea Limited&#xff08;冬海集团&#xff0c;简称为Sea&#xff09;。虾皮商城于2015年在新加坡成立以来&#xff0c;业务范围辐射新加坡、马来西亚、菲律宾、泰国、越南、巴西等10余个市场1。拥有…...

Pyspark综合案例(pyspark安装和java运行环境配置)

一、RDD对象 PySpark支持多种数据的输入&#xff0c;在输入完成后&#xff0c;都会得到一个&#xff1a;RDD类的对象 RDD全称为&#xff1a;弹性分布式数据集&#xff08;Resilient Distributed Datasets&#xff09; PySpark针对数据的处理&#xff0c;都是以RDD对象作为载…...

虚拟机突然无法访问外部网络的现象集合

现场还原 虚拟机突然无法访问外部网络 ping 8.8.8.8的时候显示网络不可达 ping 8.8.8.8ping www.baidu.com&#xff08;报&#xff1a;未知的名称或服务或请求超时&#xff09; ping www.baidu.comyum操作 也提示错误&#xff1a;为仓库 ‘appstream’ 下载元数据失败 : C…...

国庆中秋特辑(一)浪漫祝福方式 用循环神经网络(RNN)或长短时记忆网络(LSTM)生成祝福诗词

目录 一、使用深度学习中的循环神经网络&#xff08;RNN&#xff09;或长短时记忆网络&#xff08;LSTM&#xff09;生成诗词二、优化&#xff1a;使用双向 LSTM 或 GRU 单元来更好地捕捉上下文信息三、优化&#xff1a;使用生成对抗网络&#xff08;GAN&#xff09;或其他技术…...

【入门篇】ClickHouse 的安装与配置

文章目录 0. 前言ClickHouse的安装1. 添加 ClickHouse 的仓库2. 安装 ClickHouse3. 启动 ClickHouse 服务器4. 使用 ClickHouse 客户端 ClickHouse的配置 1. 详细安装教程1.1. 系统要求1.1. 可用安装包 {#install-from-deb-packages}1.1.1. DEB安装包1.1.1. RPM安装包 {#from-r…...

PyTorch 2.8镜像基础教程:torch.compile加速、FlashAttention-2启用参数详解

PyTorch 2.8镜像基础教程&#xff1a;torch.compile加速、FlashAttention-2启用参数详解 1. 镜像环境快速验证 在开始使用PyTorch 2.8镜像前&#xff0c;我们需要先确认环境是否正常工作。打开终端&#xff0c;运行以下命令&#xff1a; python -c "import torch; prin…...

ChatGLM3-6B-128K部署指南:Ollama环境配置避坑大全

ChatGLM3-6B-128K部署指南&#xff1a;Ollama环境配置避坑大全 本文面向需要处理长文本任务的开发者和研究者&#xff0c;手把手教你如何快速部署ChatGLM3-6B-128K模型&#xff0c;避开环境配置中的常见坑点。 1. 环境准备与快速部署 在开始部署之前&#xff0c;我们先简单了解…...

Drizzle ORM性能优化终极指南:查询优化与缓存策略详解

Drizzle ORM性能优化终极指南&#xff1a;查询优化与缓存策略详解 【免费下载链接】drizzle-orm drizzle-team/drizzle-orm: 是一个基于 C 的 ORM&#xff08;对象关系映射&#xff09;库&#xff0c;支持 MySQL 和 SQLite 数据库。适合对 C、数据库开发以及想要使用轻量级 ORM…...

软件测试员转型AI测试:机遇与挑战全解析

技术浪潮下的必然选择在人工智能技术席卷全球的浪潮中&#xff0c;软件测试领域正经历前所未有的变革。2026年数据显示&#xff0c;AI在测试行业的渗透率已超40%&#xff0c;新发AI测试岗位量同比增长543%&#xff0c;薪资溢价高达18%。这一趋势迫使测试从业者直面转型抉择&…...

嵌入式系统调试常见问题与解决方案

嵌入式系统调试中的典型问题分析与解决策略1. 常见调试问题案例分析1.1 程序文件版本错误在嵌入式开发过程中&#xff0c;一个常见的低级错误是使用了错误的程序文件版本。某工程师在调试时发现单片机完全不执行程序&#xff0c;即使是最基本的GPIO控制也无法实现。经过以下排查…...

Nuitka打包Python脚本为.exe的完整避坑指南(含Selenium解决方案)

Nuitka打包Python脚本为.exe的完整避坑指南&#xff08;含Selenium解决方案&#xff09; 将Python脚本打包成独立的可执行文件是许多开发者面临的常见需求&#xff0c;尤其是当需要分发工具或应用给没有Python环境的用户时。Nuitka作为一款强大的Python编译器&#xff0c;能够将…...

S3 文件操作进阶实践:从基础上传到完整性保障

1. S3文件操作的核心挑战与解决方案 第一次接触AWS S3时&#xff0c;很多人会觉得文件上传下载不就是调用几个API的事&#xff1f;但真正投入生产环境后&#xff0c;各种问题就会接踵而至。我见过最典型的案例是某电商平台在促销期间&#xff0c;因为文件上传没有做完整性校验…...

冒险岛V128单机版服务端魔改指南:从基础搭建到自定义任务/装备修改

冒险岛V128单机版深度定制指南&#xff1a;从零构建个性化游戏世界 在数字娱乐的黄金时代&#xff0c;怀旧游戏焕发新生已成为一种文化现象。作为横版卷轴网游的经典之作&#xff0c;冒险岛凭借其独特的艺术风格和社交属性&#xff0c;至今仍拥有大量忠实玩家。而单机版的出现&…...

FPGA商用级ISP:动态坏点校正(DPCC)的滑窗架构与并行判决实现

【写在前面&#xff1a;为什么要写这个专栏&#xff1f;】在数字图像处理领域&#xff0c;ISP&#xff08;图像信号处理器&#xff09;的算法原理并不罕见&#xff0c;但真正能够支持 4K60fps 实时处理、并经过商用验证的 Verilog 硬核实现思路 却往往秘和封装在黑盒之中。我手…...

数据稠密计算的算法优化:从理论到实践

数据稠密计算的算法优化&#xff1a;从理论到实践 引言 作为一名在数据深渊里捞了十几年 Bug 的女码农&#xff0c;我见过太多因为算法选择不当导致的性能问题。在数据稠密计算中&#xff0c;算法的选择和优化是提升计算性能的关键因素之一。今天&#xff0c;我们来聊聊数据稠密…...