Vue+SpringBoot项目前端如何获取本地磁盘路径的照片

一、问题

今日项目中遇到的问题:

在页面想要展示本地磁盘路径的照片,但是一直无法显示出来

原因:可能是vue无法直接读取本地磁盘的照片(本人盲猜)

1.解决思路

1.后端进行静态资源映射

2.前端调用

2.实现步骤一

在后端的MyWebMvcConfigurerAdapter中进行配置

java 复制代码
@Configuration
public class MyWebMvcConfigurerAdapter implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/imagesWeb/**").addResourceLocations("file:D:/ideaworkspace/file/");
        WebMvcConfigurer.super.addResourceHandlers(registry);
    }
}

3.步骤二前端访问

9527为后端启动端口号

html 复制代码
  <img :src="'http://127.0.0.1:9527/imagesWeb/'+item" style="width: 100%;height: 250px">

点赞加关注,持续更新中!!!

相关推荐
前端 贾公子1 小时前
pnpm 的 resolution-mode 配置 ( pnpm 的版本解析)
前端
伍哥的传说2 小时前
React 自定义Hook——页面或元素滚动到底部监听 Hook
前端·react.js·前端框架
麦兜*4 小时前
Spring Boot 集成Reactive Web 性能优化全栈技术方案,包含底层原理、压测方法论、参数调优
java·前端·spring boot·spring·spring cloud·性能优化·maven
Jinkxs4 小时前
JavaScript性能优化实战技术
开发语言·javascript·性能优化
知了一笑4 小时前
独立开发第二周:构建、执行、规划
java·前端·后端
UI前端开发工作室5 小时前
数字孪生技术为UI前端提供新视角:产品性能的实时模拟与预测
大数据·前端
Sapphire~5 小时前
重学前端004 --- html 表单
前端·html
TE-茶叶蛋5 小时前
Flutter、Vue 3 和 React 在 UI 布局比较
vue.js·flutter·react.js
Maybyy5 小时前
力扣242.有效的字母异位词
java·javascript·leetcode
遇到困难睡大觉哈哈5 小时前
CSS中的Element语法
前端·css