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 分钟前
Flutter 实战: 计算器
开发语言·javascript·flutter
大模型玩家七七20 分钟前
梯度累积真的省显存吗?它换走的是什么成本
java·javascript·数据库·人工智能·深度学习
. . . . .28 分钟前
shadcn组件库
前端
2501_9447114336 分钟前
JS 对象遍历全解析
开发语言·前端·javascript
发现一只大呆瓜1 小时前
虚拟列表:支持“向上加载”的历史消息(Vue 3 & React 双版本)
前端·javascript·面试
css趣多多1 小时前
ctx 上下文对象控制新增 / 编辑表单显示隐藏的逻辑
前端
阔皮大师2 小时前
INote轻量文本编辑器
java·javascript·python·c#
lbb 小魔仙2 小时前
【HarmonyOS实战】React Native 表单实战:自定义 useReactHookForm 高性能验证
javascript·react native·react.js
_codemonster2 小时前
Vue的三种使用方式对比
前端·javascript·vue.js
寻找奶酪的mouse2 小时前
30岁技术人对职业和生活的思考
前端·后端·年终总结