vue3-(jeecgBoot) 本地图片展示，部署后加载失败解决

已于 2024-02-27 16:22:47 修改
阅读量1k 收藏 20
点赞数 17
文章标签： Vue3 jeecgboot
于 2024-02-27 16:19:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mulingyingzi/article/details/136325484
版权
在Vue3项目中，使用jeecgBoot时遇到本地运行图片显示正常，但部署后无法加载的问题。通过将图片地址设置为变量，如导入defImg from '@/assets/images/icon-alarm-default.png'，成功解决了部署后图片无法显示的困扰。
摘要由CSDN通过智能技术生成

开始使用的方法如下：

<img  class="alarm" :src="'@/assets/images/icon-alarm-default.png"/>

结果是本地运行测试可以正常显示，部署发布后就不显示了
解决方案**：
图片地址配置为变量
import defImg from ‘/@/assets/images/icon-alarm-default.png’;

最低0.47元/天 解锁文章
木棉杉
关注
  • 17
    点赞
  • 踩
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
workflow-bpmn-modeler-jeecgboot V0.1.0
07-14
《workflow-bpmn-modeler-jeecgboot V0.1.0：基于flowable流程与vue.js的增强型工作流设计器》 在信息技术领域，流程管理是企业自动化的重要组成部分，而BPMN（Business Process Model and Notation）模型器则是...
vue3 图片/视频 加载失败重试
不想起床
02-29 1066
媒体组件，提供了失败的回调，可以使用失败回调，不断的load来加载数据加载成功后，或者到达一定次数时，注意及时销毁。
JEECG 上传头像,图片并切割
04-19
NULL 博文链接：https://annan211.iteye.com/blog/1879963
Vue3照片本地渲染不显示 以及照片显示失败
q77777_7的博客
03-17 1666
图片不显示原因及解决方法：assets在项目编译的过程中会被webpack处理解析为模块依赖，只支持相对路径的形式，加载图片模块通过webpack的url-loader加载器来实现，url-loader是解析不了动态绑定的src的导致最终显示的地址是未处理的地址，所以要用相对路径src引入。明明img图片在同一路径下 且路径未发生错误为什么会照片打不开。在控制台点击图片切换按钮却可以切换。现在就可以正常显示了。
解决vue3项目打包后部署后某些静态资源图片不加载问题
蒾酒的博客
05-12 1434
可能是因为在部署后的服务器环境中对中文文件名的支持不完善。服务器在解析 URL 时可能无法正确识别或编码中文字符，导致无法正确找到文件路径。因此，改用英文文件名后，服务器能够正确解析和访问到文件，所以图片显示正常。打开浏览器控制台发现这张图片报错404。然后访问时发现导航栏背景图片没加载。将背景图片名称修改成英文。开发完项目打包并部署。
【Vue】】img使用 :src 动态绑定图片地址，但是加载图片不成功
y_coder的博客
07-31 4871
img标签直接动态绑定图片的相对路径的时候，图片不能正常显示。动态地址，路径被加载器解析为字符串，所以图片找不到。设置绝对路径或者相对路径是改为用。引入才能成功，就可以动态使用了。
jeecgboot图片、视频上传异常
weixin_46587496的博客
02-09 3568
jeecgboot图片、视频上传异常1.服务器端口映射2.服务器防火墙3.index的配置文件4.补存（可有可没有） 1.服务器端口映射        若使用的是阿里云等云服务器时，需在安全组将后台端口开放；若使用的是自建机房，则需在防火墙、路由器上进行后台端口的映射； 2.服务器防火墙        在对应的服务器虚拟机中开放后台端口的入栈、出栈规则（或关闭防火墙）
word源码java-ant-design-vue-jeecg:jeecgboot-前端
06-05
JeecgBoot 是一款基于代码生成器的低代码开发平台！前后端分离架构 SpringBoot2.x，SpringCloud，Ant Design&Vue，Mybatis-plus，Shiro，JWT，支持微服务。强大的代码生成器让前后端代码一键生成，实现低代码开发! ...
基于Vue3的JeecgBoot低代码平台前端设计源码
最新发布
05-25
本源码为基于Vue3的JeecgBoot低代码平台前端设计，包含656个Vue文件、550个TypeScript文件等，共1425个文件。该项目旨在为用户提供一个全面、便捷的低代码平台前端解决方案，通过Vue3.0、TypeScript、Vite、Ant-...
word源码java-jeecg-boot-activiti-pro:jeecg-boot-activiti-pro
06-05
JeecgBoot 是一款基于代码生成器的低代码平台！前后端分离架构 SpringBoot2.x，SpringCloud，Ant Design&Vue，Mybatis-plus，Shiro，JWT，支持微服务。强大的代码生成器让前后端代码一键生成，实现低代码开发! Jeecg...
JeecgBoot table 中 图片
qq_41722795的博客
06-29 2902
需要在表格中显示图片：记录在表格中显示图片 1. 效果图 2. 生成表格 生成表格的方法可参考官方文档；http://doc.jeecg.com/2043915 或参考我之前的文档：https://blog.csdn.net/qq_41722795/article/details/105946973 3. 修改前端页面表格列 方式一： 需要显示图片列的代码： 数据库中该字段保存的是 图片的地址 { title:'头像', alig..
Vue中使用:src绑定图片 图片加载不出来 不能显示
weixin_45912825的博客
07-20 4586
当Vue在前端传入一个图片时会自动添加一个无序乱码，如下图所示 在项目中的图片名称为tree.jpg,但是浏览器自动添加上了6990f624的乱码。 所以直接在:src中传入图片路径是不行的 我们需要得到图片路径中的乱码才能获得正确路径 方法很简单，只需用require方法引入图片传给 :src,就可以得到编码后的图片路径。 如下： 这是错误写法： :src="../../assets/img/tree.jpg" 这是正确写法： :src="require('../../assets/img/tre.
[ vue3 + vite ] 在开发环境时可以正常访问图片路径，打包部署到服务器上却显示路径undefined问题
Hiny2y2的博客
01-19 494
在开发环境时是正常的，图片可以正常显示，但是打包部署到服务器之后，图片地址就变成undefined了，几番周折，在Stack Overflow上找到了解决方法，具体的路径要改成自己的。我原本使用vite文档中给的方法引用项目文件夹中的图片，然后再打包部署到服务器上图片就正常显示了。今天遇到了这个问题，记录一下。
vue3项目中如何实现图片的二次处理
zxcvb0825的博客
02-03 1168
在说这个之前，我们要先理解图片的二次处理与图片压缩之间的差异。图片的二次处理除了对图片进行压缩，还可以进行更多特效的处理，可以对图片进行宽高的重设，图像位置适应性调整，清晰的的控制，背景颜色的添加，图像质量的设置，旋转反转镜像等操作。那么在项目中为什么要对进行二次处理操作呢？综上所述，在vue项目中对图片进行二次处理操作，可以使图片在网页上有更好的表现效果，更快的加载速度和更好的用户体验。那么在vite环境中的vue3项目中，如何进行图片的二次处理？？？
使用Vue+SpringBoot+JeecgBoot,本地页面中显示图片，部署到服务器上不显示图片
qq_45722023的博客
08-12 1482
页面部署到服务器上，使用代码生成器生成的页面代码，设置弹窗弹窗，弹窗中的图片不显示， 在本地运行时正常显示， 解决方法; 1:找到JFormContainer.vue文件 2：将style中的 .jeecg-form-container-disabled .ant-upload-select{display:none} 注释掉，如下图 3：重新部署页面代码 ...
Jeecg-Boot 2.4.0版部署后无法加载验证码问题Provisional headers are shown Failed to load response data
weixin_44125423的博客
06-22 1590
Jeecg-Boot 2.4.0版部署后无法加载验证码问题 页面截图 这个问题在我部署后页面验证码一直出不来，困扰了我一天，在网上各种搜集加上请教搞前端的朋友，终于找到问题所在！ 该问题是前端问题，文件是src/utils/request.js 具体原因就是注释掉的baseURL：apiBaseUrl，这里面和vue.config.js冲突，只要把baseURL：apiBaseUrl注释掉，改成你的项目后缀，默认的是jeecg-boot，我的项目后缀改了所以是itms ...
jeecgboot 图片与文件地址问题
当历史只剩罪恶，唯有推倒重来，我们开创文明，我们传承文明，周而复始，生生不息。
08-13 2944
jeecg 开发过程中碰到的问题 需求：非组件时显示图片与文件 问题：图片未曾正确显示 原因：地址不对 解决方法：加一句调用地址的语句 代码如下： //item image 是循环的地址 // 一：直接拼接，然后在html中使用 window._CONFIG['staticDomainURL']+'/'+item // 二。分开拼接：直接在html中使用 <img :src="`${staticDomainURL}/${image}`" alt=""> //data 中定义stat
vue3本地图片加载不出来，解决方法
m0_72072486的博客
01-31 2185
先引入本地图片然后直接应用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值