使用Vue+SpringBoot+JeecgBoot,本地页面中显示图片，部署到服务器上不显示图片

最新推荐文章于 2023-11-29 15:35:55 发布
最新推荐文章于 2023-11-29 15:35:55 发布
阅读量1.4k 收藏 3
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45722023/article/details/119645898
版权

页面部署到服务器上，使用代码生成器生成的页面代码，设置弹窗弹窗，弹窗中的图片不显示，

在本地运行时正常显示，

解决方法;

1:找到JFormContainer.vue文件

2：将style中的

.jeecg-form-container-disabled .ant-upload-select{display:none}

注释掉，如下图

3：重新部署页面代码

bug制造者plus
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【Minio怎么用】Minio上传图片并Vue回显
赵达宇的博客
07-30 4962
流程：1.文件服务器Minio的安装2.网页端操作3.后端代码实现4.前端传图片。
vue3-(jeecgBoot) 本地图片展示，部署后加载失败解决
最新发布
Yolanda的专栏
02-27 950
开始使用的方法如下： 结果是本地运行测试可以正常显示，部署发布后就不显示了 解决方案**： 图片地址配置为变量 import defImg from ‘/@/assets/images/icon-alarm-default.png’; 完美解决！你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器
vue的image压缩/本地图片放在在线服务器上
m0_53912016的博客
04-11 322
https://tinypng.com/
jeecg项目部署笔记
sunshine641的博客
01-18 1383
最近要把 jeecg的前端项目部署到服务器上，结果出了错误。我一个前端超级小菜鸟啥也不会，鼓捣了好久 。 项目部署 打包 用的是webstrom，Antd-Jeecg, 写好的项目 直接 build打包，会在项目目录下生成一个dist文件 将dist文件复制到服务器上的 nginx文件的HTML文件夹下 我这里是复制到别的自己建的obd文件夹了，因为HTML下已经有别的项目了。到时候 修改配置 引用进去就好了。 后台服务器配置nginx文件（jeecg文档参考链接 ） 修改 nginx下的conf
Vue 打包到生产环境部署后图标不见了
时光有伱，记忆成花~
07-17 1321
Vue 打包到生产环境部署后图标不见了
vue cli4 阻止图片转base64
Tankic的博客
02-23 2094
文章目录介绍功能步骤在项目根目录中新建vue.config.js文件vue.config.js文件内容 介绍 在使用vue cli4的过程中，我们遇到比较小的图片被转成了base64格式的编码。但实际使用的时候不需要，因为转码后的图片不够清晰，特别是在大屏和高分辨率的显示器时尤甚。 参考文献：vue.config.js配置参考 功能 避免vue cli4图片转码 步骤 在项目根目录中新建vue.config.js文件 vue.config.js文件内容 var path = require('path
vue+springboot图片上传和显示的示例代码
10-15
前端在接收到图片URL后，可以直接在HTML中使用`<img>`标签展示图片，如： ```html 图片描述"> ``` 其中，`imageUrl`应该包含服务器返回的图片URL。这样，用户在编辑器中插入的图片就能在页面上正确显示了。 总结...
课程设计，宾馆客房预订系统，使用Vue+SpringBoot+MySQL.zip
10-16
课程设计，宾馆客房预订系统，使用Vue+SpringBoot+MySQL 课程设计，宾馆客房预订系统，使用Vue+SpringBoot+MySQL 课程设计，宾馆客房预订系统，使用Vue+SpringBoot+MySQL 课程设计，宾馆客房预订系统，使用Vue+...
vue+springboot+redis+kaptcha实现登录验证码
04-10
在登录页面上，我们可以创建一个Vue组件来处理验证码的显示、刷新和验证逻辑。Vue.js通过异步通信（如axios库）与后端交互，获取和验证验证码。 Spring Boot是基于Java的微服务框架，它简化了新Spring应用的初始...
vue+springboot网页商城项目
06-12
在这个“vue+springboot网页商城项目”中，你将找到五个不同的示例，涵盖了多种操作界面和设计风格。下面我们将详细探讨Vue.js和SpringBoot在构建网页商城项目中的应用以及相关的技术知识点。 Vue.js，作为一个轻量...
解决打包后图片不显示的问题
qq_45282557的博客
12-30 487
解决打包图片不显示问题
vue前后端分离图片无法显示的问题
爱学习的大雄的博客
04-20 3719
遇到的问题 在实现vue与后端实现图片上传与回显中我遇到了图片显示不出的问题（使用了虚拟路径进行配置），最后发现我是访问路径错误,同时也有文件名带中文的图片。 前端我使用的是el-upload组件来进行文件的上传 <template slot-scope="scope"> <div class="singer-img"> <img :src="getUrl(scope.row.pic)" style="width:100%"/> </
jeecgboot图片、视频上传异常
weixin_46587496的博客
02-09 3428
jeecgboot图片、视频上传异常1.服务器端口映射2.服务器防火墙3.index的配置文件4.补存（可有可没有） 1.服务器端口映射        若使用的是阿里云等云服务器时，需在安全组将后台端口开放；若使用的是自建机房，则需在防火墙、路由器上进行后台端口的映射； 2.服务器防火墙        在对应的服务器虚拟机中开放后台端口的入栈、出栈规则（或关闭防火墙）
跨域情况下图片无法访问，展示默认图片
LOVE_mingjing的博客
04-17 432
在main文件内 创建一个 自定义指令及对应方法。v-default-img 原始图片（网图）src 展示默认图(本地或网图）
Element UI 部署到服务器，图标不显示问题
weixin_48474646的博客
11-29 1853
vue项目引用Element UI组件后，本地运行时，图标是正常显示的，但是打包部署后，图标不显示。
Vue - vue+webpack创建的项目打包发布至服务器，页面空白及背景图片不显示问题解决
技术共享，共同进步！
04-11 2221
Vue - vue+webpack创建的项目打包发布至服务器，页面空白及背景图片不显示问题解决
SpringBoot项目中可以上传图片，但图片加载失败
二哈喇子！
01-29 5141
SpringBoot项目中可以上传图片，但图片加载失败
SpringBoot上传图片和回显，以及我出现的问题正常上传文件夹，但路径报404，能传到文件夹，但是回显不出来照片，遇见的大坑
qq_51753851的博客
12-06 2166
springboot上传图片的文件和下载，以及我出现的问题是：文件能正常传到文件夹，但是路径报404，回显不出来照片。这篇文章统统帮你解决。
使用vue + springboot 获取前端页面上传到后台文件的本地路径
09-12
### 回答1： 可以使用Vue和SpringBoot来获取前端页面上传文件的本地路径。首先，在Vue中，可以使用input标签的change事件获取上传文件的本地路径，然后将本地路径传递到SpringBoot后台。具体操作可以参考Vue和SpringBoot的相关文档。 ### 回答2： 使用Vue和Spring Boot获取前端页面上传文件的本地路径的步骤如下： 1. 首先在Vue中使用`<input type="file">`元素创建一个文件上传输入框，让用户选择要上传的文件。 2. 在Vue的组件中，使用`axios`或其他HTTP库将选择的文件发送到Spring Boot后台。 3. 在Spring Boot的Controller中创建一个接收文件的API接口，使用`@PostMapping`注解来处理POST请求，同时指定文件上传的路径。 4. 在接口方法中，使用`@RequestParam`注解获取前端发送的文件，并通过`transferTo`方法保存文件到指定路径。 5. 在Vue中，可以在文件上传成功后显示文件的本地路径，可以通过接口返回的数据中包含文件存储路径，然后在Vue组件中显示出来。 6. 在Vue中，可以通过接口返回的数据或者从服务器请求数据，将文件的本地路径显示在页面上，比如显示在一个列表或者详情中。 综上所述，通过使用Vue和Spring Boot，可以实现从前端页面上传文件到后台并获取文件的本地路径。Vue负责文件的选择和发送，Spring Boot负责接收和保存文件，并通过API接口返回文件的存储路径，Vue再将路径显示在前端页面上。 ### 回答3： 使用Vue和Spring Boot可以很方便地获取前端页面上传到后台的文件本地路径。具体步骤如下： 1. 前端页面使用Vue框架编写，可以使用Vue的文件上传组件，比如`element-ui`的`el-upload`组件。在组件的`before-upload`钩子函数中，可以通过`FormData`对象将文件上传到后台。同时，将`file`对象作为参数传递给后台。 2. 后台使用Spring Boot框架编写，可以在Controller层定义一个`POST`请求的接口，接收前端传递过来的`file`对象。在Controller方法中，可以通过`@RequestParam("file") MultipartFile file`注解将文件对象转换为`MultipartFile`类型，方便后续操作。 3. 在后台Controller方法中，可以调用`MultipartFile`对象的`transferTo`方法，将文件保存到本地指定路径。可以使用`java.nio.file.Paths`类的静态方法`get`获取本地路径，再调用`MultipartFile`对象的`transferTo`方法指定文件保存的本地路径。 4. 完成文件保存后，将文件的本地路径返回给前端。可以使用`ResponseEntity`来包装返回结果，将保存的文件本地路径作为返回值返回给前端。 通过以上步骤，我们可以实现前端页面上传文件到后台后，获取上传文件的本地路径。前端页面使用Vue完成文件上传，后台使用Spring Boot接收并处理文件上传请求，将文件保存到指定的本地路径，最后将文件的本地路径返回给前端。这样，我们就可以方便地获取到上传文件的本地路径了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值