前端Vue页面中如何展示本地图片

<el-table :data="tableData" stripe style="width: 100%"><el-table-column prop="imgUrl" label="图片"><template v-slot="scope"><img :src= "http://localhost:8888/image/ ' + scope.row.imgUrl" /></template></el-table-column>
</el-table>//tableData是从数据库查询得到的数据
//scopre.row.imgUrl是图片的url地址,在这个项目中为图片在数据库中存储的名字//这个是向后端获取数据的请求,得到数据之后将数据赋值给tableData
const initProductList=async()=>{const res = await axios.post("image/list",queryForm.value)tableData.value = res.data.orderList;console.log("tableData is",tableData)total.value = res.data.total;
}
initProductList();
//数据打印出来如下图所示

我们使用<img>标签展示图片,src属性设置成图片请求路径

"http://localhost:8888/image/img.jpg"的格式,也就是会向后端发送这个请求获取图片。

 <img :src= "http://localhost:8888/image/ ' + scope.row.imgUrl" />

但是图片是存放在本地的某个文件里,那如何才能找到呢?

这就需要对这个请求的路径进行映射,以找到真正的存放图片的地址。

我们需要写一个配置类,添加如下的方法
@Configuration
public class WebAppConfigurer implements WebMvcConfigurer {@Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {            registry.addResourceHandler("/image/**").addResourceLocations("file:D:\\img\\");/*在这段代码中,addResourceHandlers方法用于添加资源处理器。ResourceHandlerRegistry对象用于注册资源处理器,并指定资源的访问路径和存放位置。/image/**对应的资源就放在D盘的img目录下,通过这样的配置当前端发送
http://localhost:8888/image/123.jpg时,应用程序会将请求映射到本机 D:\img\123.jpg路径下的文件,并将文件返回给前端。
如果是Linux系统,则不加盘符
*/}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/123825.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

R-FCN: Object Detection via Region-based Fully Convolutional Networks(2016.6)

文章目录 AbstractIntroduction当前最先进目标检测存在的问题针对上述问题&#xff0c;我们提出... Our approachOverviewBackbone architecturePosition-sensitive score maps & Position-sensitive RoI pooling Related WorkExperimentsConclusion 原文链接 源代码 Abstr…

飞天使-mysql8.0远程连接允许

mysql -u root -p 查看身份验证类型 mysql> use mysql; Database changed mysql> SELECT Host, User, plugin from user; ------------------------------------------------- | Host | User | plugin | ------------------------------------------------- | % | root …

Sass、Less和Stylus之间有什么主要的区别?

Sass、Less和Stylus是三种常见的CSS预处理器&#xff0c;它们在功能和语法上有一些区别。以下是它们之间的主要区别&#xff1a; 1&#xff1a;语法差异&#xff1a; Sass使用缩进的语法&#xff0c;使用类似于Python的缩进来表示嵌套规则和块级作用域。Less和Stylus使用类似…

大数据之LibrA数据库系统告警处理(ALM-12002 HA资源异常)

告警解释 HA软件周期性检测Manager的WebService浮动IP地址和数据库。当HA软件检测到浮动IP地址或数据库异常时&#xff0c;产生该告警。 当HA检测到浮动IP地址或数据库正常后&#xff0c;告警恢复。 告警属性 告警参数 对系统的影响 如果Manager的WebService浮动IP地址异常…

SSM咖啡点餐管理系统开发mysql数据库web结构java编程计算机网页源码eclipse项目

一、源码特点 SSM 咖啡点餐管理系统是一套完善的信息系统&#xff0c;结合SSM框架完成本系统&#xff0c;对理解JSP java编程开发语言有帮助系统采用SSM框架&#xff08;MVC模式开发&#xff09;&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主 要采用B/S模式开…

selenium : TypeError: object of type ‘float‘ has no len()

使用selenium时报错 TypeError: object of type float has no len() 。 显然selenium不允许直接输入浮点类型数据&#xff08;字符串与整形可以&#xff09;。 但是问题excel中这个数据值为空&#xff0c;只能猜测不同电脑打开excel时格式不同影响读取数据。 将该数据使用st…

vue3 Suspense组件

在 Vue 3 中&#xff0c;<Suspense> 组件用于处理异步组件加载时的等待状态和错误处理。它允许你在加载异步组件时显示一个自定义的加载指示器&#xff0c;以及在加载失败时显示错误信息。以下是一个详细的 <Suspense> 组件的使用示例&#xff1a; 首先&#xff0…

CSS基础入门04

目录 1.内边距 1.1基础写法 1.2复合写法 2.外边距 2.1基础写法 2.2复合写法 2.3块级元素水平居中 3.去除浏览器默认样式 4.弹性布局 4.1初体验 5.flex 布局基本概念 6.常用属性 6.1justify-content 6.2align-items 1.内边距 padding 设置内容和边框之间的距离. …

java的字符串字面量

在同一个类中&#xff0c;字符串字面量引用同一个字符串对象。例如&#xff1a; package com.thb;public class Demo4 {public static void main(String[] args) {String world "world";System.out.println(world "world");}}运行输出&#xff1a; tru…

01函数的基础

函数是一段功能性代码&#xff0c;可以让python做特殊的事情 函数是代码重用的一种方式&#xff0c;可以让你多次使用函数 abs函数bool函数float函数 绝对值 abs 绝对值 绝对值数值距离原点的位置 0和所有的正数绝对值等于它本身 负数的绝对值等于他的相反数 bool函数 boo…

NewStarCTF2023week4-midsql(利用二分查找实现时间盲注攻击)

大致测试一下&#xff0c;发现空格被过滤了 使用内联注释/**/绕过&#xff0c;可行 1/**/-- 使用%a0替代空格&#xff0c;也可以 1%a0-- 再次测试发现等号也被过滤&#xff0c;我们使用 like 代替 &#xff08;我最开始以为是and被过滤&#xff0c;并没有&#xff0c;如果是…

使用Python批量修改PPT字体和提取全部文字到word

目录 一、修改PPT中每一页的字体二、将文本框中的字都放到word里 将一份PPT的每一页字体、大小、是否加粗都统一&#xff0c;是一个常见需求。特别是字体统一是高频、热点需求。在python操控PPT常用库python-pptx中有一个bug&#xff0c;对字体的修改只能修改数字和英文字母&am…

智慧公厕:提升城市卫生与舒适体验的未来之选

智慧公厕作为城市管理的一项重要创新&#xff0c;已经在环境监测调控、厕位监测引导、自动化清洁、自动灯光控制、远程控制等方面展现出先进而完善的功能。它不仅提升了市民对公共厕所卫生、舒适、安全等方面的使用体验&#xff0c;同时也为城市管理带来了颇具引领性的改革和升…

大数据Flink(一百零三):SQL 表值聚合函数(Table Aggregate Function)

文章目录 SQL 表值聚合函数(Table Aggregate Function) SQL 表值聚合函数(Table Aggregate Function) Python UDTAF,即 Python TableAggregateFunction。Python UDTAF 用来针对一组数据进行聚合运算,比如同一个 window 下的多条数据、或者同一个 key 下的多条数据等,与…

一文详解汽车电子LIN总线

0.摘要 汽车电子LIN总线不同于CAN总线。 LIN总线基本上是CAN总线的廉价补充&#xff0c;相比于CAN总线&#xff0c;它提供较低的可靠性和性能。同时LIN总线也是一个应用非常广泛的网络协议&#xff0c;并且越来越受欢迎。 再一次&#xff0c;我们准备了一个关于LIN总线的简要…

PHP | php入门知识(if、switch、数组、数组排序、超级全局变量)

文章目录 一、php条件语句&#xff08;if、switch&#xff09;1. if语句2. if...else语句3. if...elseif...else语句4. switch语句 二、数组1&#xff09;数值数组1. 创建数值数组的两种方法&#xff1a;2. 获取数组的长度&#xff08;count()函数&#xff09;3. 遍历数值数组&…

JavaScript 中的负无穷大是什么?

在 JavaScript 中&#xff0c;负无穷大表示为 -Infinity。它是一个特殊的数值&#xff0c;用于表示比任何实数都要小的值。 负无穷大用于表示超出数值范围的情况&#xff0c;例如在进行数学计算时发生了溢出或出现了无法表示的结果。它可以通过将负无穷大赋值给变量或通过某些…

接触式静电压测量仪的用途和操作方法

接触式静电压测量仪是一种用于测量静电电荷的仪器&#xff0c;主要用于工业生产和科学研究领域。它可以测量静电电压、静电场强、静电电荷等参数&#xff0c;对于静电控制和环境监测等方面具有重要的作用。 接触式静电压测量仪的操作方法如下&#xff1a; 接通电源&#xff1a;…

系统架构设计师-第17章-通信系统架构设计理论与实践-软考学习笔记

通信系统〈也称为通信网络〉是利用各种通信线路将地理上分散的、具有独立功能的计算机系统和通信设备按不同的形式连接起来&#xff0c;依靠网络软件及通信协议实现资源共享和信息传递的系统。 通信系统概述 通信系统网络架构 通信网络从大的右面主要包括局域网、广域网、移…

libv4l2 交叉编译

错误1&#xff1a;‘SYS_open’未声明(在此函数内第一次使用) 修改 ../libv4lconvert/libv4lsyscall-priv.h 对使用 SYS_open进行判断 #ifdef SYS_openat #define SYS_OPEN(file, oflag, mode) \ syscall(SYS_openat, AT_FDCWD, (const char *)(file), (int)(oflag), (mod…