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

前端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.lryc.cn/news/210252.html

相关文章:

  • 基于PHP的图像分享社交平台
  • 【算法|动态规划No.31 | 01背包问题】01背包模板题
  • Azure - 机器学习:使用 Apache Spark 进行交互式数据整理
  • 4.5 final修饰符
  • Clickhouse数据库部署、Python3压测实践
  • 探索控制领域:从电视遥控器到自动驾驶【基础概念理解、应用实例】
  • 在R中安装CmdStanR的步骤-R4.3.1-CmdStanR-0.6.1.900
  • 安信可小安派AiPi 代码下载
  • 程序化交易(二)level2行情数据源接入
  • 4.6 static修饰符
  • C++头文件定义变量
  • [蓝桥杯-610]分数
  • Vue指令大全:深入探索Vue提供的强大指令功能
  • x210项目重新回顾之十七升级到linux4.19.114 +buildroot2018再讨论
  • shell_56.Linux永久重定向
  • CN考研真题知识点二轮归纳(1)
  • hadoop使用简介
  • WebSocketClient objects are not reuseable
  • 分享54个ASP.NET源码总有一个是你想要的
  • 闭包通俗解释,Demo(Go Java Python)
  • Linux部署Redis Cluster高可用集群(附带集群节点添加删除以及槽位分配操作详解)
  • 【PWN · heap | Off-By-One】Asis CTF 2016 b00ks
  • C++STL---Vector、List所要掌握的基本知识
  • 使用FastAPI部署Ultralytics YOLOv5模型
  • A. Doremy‘s Paint 3
  • 深度学习_1 介绍;安装环境
  • Python基础入门例程19-NP19 列表的长度(列表)
  • LeetCode 2558. 从数量最多的堆取走礼物
  • 【JVM】字节码文件的组成部分
  • STM32 TIM(四)编码器接口