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">

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

相关推荐
zqx_710 分钟前
随记 前端框架React的初步认识
前端·react.js·前端框架
惜.己27 分钟前
javaScript基础(8个案例+代码+效果图)
开发语言·前端·javascript·vscode·css3·html5
什么鬼昵称1 小时前
Pikachu-csrf-CSRF(get)
前端·csrf
长天一色1 小时前
【ECMAScript 从入门到进阶教程】第三部分:高级主题(高级函数与范式,元编程,正则表达式,性能优化)
服务器·开发语言·前端·javascript·性能优化·ecmascript
NiNg_1_2341 小时前
npm、yarn、pnpm之间的区别
前端·npm·node.js
秋殇与星河1 小时前
CSS总结
前端·css
NiNg_1_2341 小时前
Vue3 Pinia持久化存储
开发语言·javascript·ecmascript
读心悦1 小时前
如何在 Axios 中封装事件中心EventEmitter
javascript·http
BigYe程普2 小时前
我开发了一个出海全栈SaaS工具,还写了一套全栈开发教程
开发语言·前端·chrome·chatgpt·reactjs·个人开发
神之王楠2 小时前
如何通过js加载css和html
javascript·css·html