前端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系统,则不加盘符
*/}
}
相关文章:
前端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&qu…...
基于PHP的图像分享社交平台
有需要请加文章底部Q哦 可远程调试 基于PHP的图像分享社交平台 一 介绍 此图像分享社交平台基于原生PHP开发,数据库mysql,前端bootstrap。平台角色分为用户和管理员。用户可注册登录,发布图像,修改个人信息,评论图像…...
【算法|动态规划No.31 | 01背包问题】01背包模板题
个人主页:兜里有颗棉花糖 欢迎 点赞👍 收藏✨ 留言✉ 加关注💓本文由 兜里有颗棉花糖 原创 收录于专栏【手撕算法系列专栏】【LeetCode】 🍔本专栏旨在提高自己算法能力的同时,记录一下自己的学习过程,希望…...
Azure - 机器学习:使用 Apache Spark 进行交互式数据整理
目录 本文内容先决条件使用 Apache Spark 进行交互式数据整理Azure 机器学习笔记本中的无服务器 Spark 计算从 Azure Data Lake Storage (ADLS) Gen 2 导入和整理数据从 Azure Blob 存储导入和处理数据从 Azure 机器学习数据存储导入和整理数据 关注TechLead,分享AI…...
4.5 final修饰符
在Java中,final修饰符可以修饰类、属性和方法,final有“最终”、“不可更改”的含义,所以在使用final关键字时需要注意以下几点: 使用final修饰类,则该类就为最终类,最终类不能被继承。 使用final修饰方法…...
Clickhouse数据库部署、Python3压测实践
Clickhouse数据库部署、Python3压测实践 一、Clickhouse数据库部署 版本:yandex/clickhouse-server:latest 部署方式:docker 内容 version: "3"services:clickhouse:image: yandex/clickhouse-server:latestcontainer_name: clickhouse …...
探索控制领域:从电视遥控器到自动驾驶【基础概念理解、应用实例】
当谈到控制学和控制系统时,你可能会联想到电视遥控器、自动驾驶汽车、飞机自动驾驶系统以及许多其他自动化系统。但控制学是一个更广泛的学科,它涵盖了各种领域,从工程到生物学,从经济学到环境科学。让我们深入了解控制学的基本概…...
在R中安装CmdStanR的步骤-R4.3.1-CmdStanR-0.6.1.900
报错未安装cmdstanr 安装包官网详细介绍: R Interface to CmdStan • cmdstanrhttps://mc-stan.org/cmdstanr/ 以下是在R中安装CmdStanR的步骤: 1. 首先,需要下载和安装C编译器 例如gcc。如果您已经安装了C编译器,则可以跳过此…...
安信可小安派AiPi 代码下载
安信可小安派AiPi 代码下载笔记记录 AiPi 代码下载(直接使用命令行操作,仅需要Type-C接口线即可) 在完成环境搭建,和代码编写前提下,使用Type-C接口线下载代码,当然可以自己使用usb-ttl串口线下载程序&am…...
程序化交易(二)level2行情数据源接入
WEBSOCKET行情接入 行情在线测试 websocket行情接口 交易在线测试 在线交易接口 官方文档地址 行情交易接口用户文档 分配服务器 注意:每次分配的服务器地址会发生变化,连接服务前,请务必调用该接口获取最新的服务器地址。 获取服务器:…...
4.6 static修饰符
static是一个修饰符,用于修饰类的成员属性和成员方法,还可以编写static代码块来优化程序性能。 1. static修饰属性 在Java程序中使用static修饰属性,则该属性称为静态属性(也称全局属性),静态属性可以使用…...
C++头文件定义变量
1.在进行头文件学习时,犯了不少错误,记录一下,先贴代码. .h头文件 #ifndef MY_FIRST_H_ #define MY_FIRST_H_struct Person {std::string name;int age;char8_t gender; };//需要使用extern来声明,否则在多个文件中引入该头文件会出现重定义…...
[蓝桥杯-610]分数
题面 解答 这一题如果不知道数论结论的话,做这个题会有两种天壤之别的体验 此题包含以下两个数论知识 1. 2^02^12^2...2^(n-1)2^n-1 2. 较大的数如果比较小的数的两倍大1或者小1,则两者互质 所以答案就是2^n-1/2^(n-1) 标程1 我的初次解答 #in…...
Vue指令大全:深入探索Vue提供的强大指令功能
目录 v-bind指令 v-on指令 v-if和v-show指令 v-for指令 自定义指令 其他常用指令 总结 Vue.js是一款流行的JavaScript框架,具备丰富的指令系统。Vue指令允许开发者直接在模板中添加特殊属性,以实现DOM操作、事件绑定、样式控制等功能。在本文中&a…...
x210项目重新回顾之十七升级到linux4.19.114 +buildroot2018再讨论
代码参考https://github.com/colourfate/x210_bsp/ 他的是linux_4.10(dtb为 s5pv210-x210..dtb)我打算用linux4.19.114(dtb为 s5pv210-smdkv210.dtb) ,所以修改build.sh ------------------------------------------------------------------------------ 5 M…...
shell_56.Linux永久重定向
永久重定向 1.脚本中有大量数据需要重定向,那么逐条重定向所有的 echo 语句会很烦琐。 这时可以用 exec 命令,它会告诉 shell 在脚本执行期间重定向某个特定文件描述符: $ cat test10 #!/bin/bash # redirecting all output to a file ex…...
CN考研真题知识点二轮归纳(1)
本轮开始更新真题中涉及过的知识点,总共不到20年的真题,大致会出5-10期,尽可能详细的讲解并罗列不重复的知识点~ 目录 1.三类IP地址网络号的取值范围 2.Socket的内容 3.邮件系统中向服务器获取邮件所用到的协议 4.RIP 5.DNS 6.CSMA/CD…...
hadoop使用简介
git clone hadoop源码地址:https://gitee.com/CHNnoodle/hadoop.git git clone错误: Filename too long错误,使用git config --global core.longpaths true git clone https://gitee.com/CHNnoodle/hadoop.git -b rel/release-3.2.2 拉取指定…...
WebSocketClient objects are not reuseable
好久没写东西,夜深了来冒个泡,先啰嗦几句。今天测试 Android App 的时候,发现推到后台不到一分钟再唤醒直接闪退,初次以为网络和GPS信号弱导致的(当时是在地铁上进行的测试),之后在网络与GPS 信…...
分享54个ASP.NET源码总有一个是你想要的
分享54个ASP.NET源码总有一个是你想要的 链接:https://pan.baidu.com/s/1khPzxtOFP0wUHpg7TBDitg?pwd8888 提取码:8888 项目名称 (ASP.Net)基于三层架构的企业信息管理系统 asp .net mvc编写的房产管理系统 asp.net core mvc 病人管理后台 asp.ne…...
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造,完美适配AGV和无人叉车。同时,集成以太网与语音合成技术,为各类高级系统(如MES、调度系统、库位管理、立库等)提供高效便捷的语音交互体验。 L…...
树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法
树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源: http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作,无需更改相机配置。但是,一…...
【SQL学习笔记1】增删改查+多表连接全解析(内附SQL免费在线练习工具)
可以使用Sqliteviz这个网站免费编写sql语句,它能够让用户直接在浏览器内练习SQL的语法,不需要安装任何软件。 链接如下: sqliteviz 注意: 在转写SQL语法时,关键字之间有一个特定的顺序,这个顺序会影响到…...
Nuxt.js 中的路由配置详解
Nuxt.js 通过其内置的路由系统简化了应用的路由配置,使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...
P3 QT项目----记事本(3.8)
3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...
【git】把本地更改提交远程新分支feature_g
创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...
select、poll、epoll 与 Reactor 模式
在高并发网络编程领域,高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表,以及基于它们实现的 Reactor 模式,为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。 一、I…...
力扣-35.搜索插入位置
题目描述 给定一个排序数组和一个目标值,在数组中找到目标值,并返回其索引。如果目标值不存在于数组中,返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...
处理vxe-table 表尾数据是单独一个接口,表格tableData数据更新后,需要点击两下,表尾才是正确的
修改bug思路: 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑:async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...
基于SpringBoot在线拍卖系统的设计和实现
摘 要 随着社会的发展,社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统,主要的模块包括管理员;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...
