解决尚品甄选验证码图片无法显示bug

最新推荐文章于 2025-06-10 17:54:23 发布
最新推荐文章于 2025-06-10 17:54:23 发布
阅读量877 收藏 9
点赞数 14
文章标签： bug
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_62646841/article/details/136690125
版权
作者在遵循视频指导时遇到图片无法显示的问题，经检查发现请求验证码的URL与baseUrl冲突。通过修改前端api/login.js和utils/request.js，解决了baseUrl设置问题，并确认了base64格式在src中的正确使用。最终图片成功显示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

按照他的视频要求去做发现图片无法正常显示，通过查看浏览器网络错误，发现请求验证码的网址是重叠的http://localhost:3001/admin/system/index/login/admin/system/index/generateValidateCode是这样的，说明baseUrl是/admin/system/index/login导致的，所以我对前端文件api/login.js和utils/request.js做了修改如图所示

最终成功显示图片

需要注意的是base64格式只能传这个，否则src无法识别

validateCodeVo.setCodeValue("data:image/png;base64,"+imageBase64);
计算机毕业设计Springboot尚品甄选交易管理系统 基于Spring Boot的尚品优选电商平台管理系统开发 Spring Boot框架下的尚品精选交易管理平台设计与实现
django毕设
01-25 972
用户注册与登录：用户可以通过填写账号、密码等信息完成注册，并登录系统。商品信息浏览：用户可以查看商品的详细信息，包括名称、分类、图片、规格、品牌、价格等。购物车管理：用户可以将商品添加到购物车，并对购物车中的商品进行数量调整或删除操作。订单管理：用户可以提交订单，并查看订单状态，包括支付、物流等信息。用户管理：管理员可以对用户信息进行查询、添加、修改和删除操作。商品管理：包括商品分类、规格和信息的管理，支持查询、添加、修改和删除。
[Day 1] 尚品甄选 - 项目
jennnncc的博客
11-09 1059
尚品甄选
《尚品甄选》：结合redis实现用户登录
知识记录
11-24 2043
结合redis实现用户登录。
《尚品甄选》：权限管理之菜单管理，递归实现树形结构查询（debug一遍）
知识记录
11-28 1580
用递归实现树形结构查询。
尚硅谷《商品甄选》项目所遇问题
m0_72930764的博客
12-20 970
在p13中按照老师的做法将两处改为自己的api时，启动前端项目时出现白屏，并且显示network error。由于本人不会前端，仅对前端有初步的认知，因此无法完成老师留的作业，自己完成前端对于表单清空的实现。原因为，在复制老师的课件时，应将ip地址改为自己虚拟机的ip地址，并且将密码和用户名改为自己的。在p74中，订单管理的前端整合中，使用搜索后，点击叉号并未使数据恢复，而是显示搜索过后的内容。查看服务器之后发现，idea报。在分类品牌中，出现了可用的重置，因此复制过去后，改了一部分使清空功能可用。
Day11-尚品汇-登录业务
qq_59110215的博客
10-24 230
卷
Java微服务项目-尚品甄选总结
总之，一起加油吧~
05-28 3338
尚品甄选是一个B2C模式的电子商务平台，包含后台管理系统和前台用户系统。项目采用前后端分离开发模式，基于SpringBoot + SpringCloud微服务架构。后台管理系统后端采用的是单体架构【就是把所有的功能写在同一个项目中】，如下所示：前台用户系统的后端采用的是微服务系统架构【一个模块就是一个独立服务】，如下图所示：项目使用技术栈：后端：Spring Boot、Spring Cloud Alibaba、Redis、EasyExcel、Minio、短信平台、支付宝支付等。
01 尚品甄选-项目概述.md
12-27
01 尚品甄选-项目概述.md
(源码)基于Spring Cloud框架的尚品甄选商城管理系统.zip
11-21
# 基于Spring Cloud框架的尚品甄选商城管理系统 ## 项目简介 尚品甄选商城管理系统是一个基于Spring Cloud框架构建的电商平台，旨在提供高效、稳定、安全的商品管理、订单处理、用户管理等功能。系统采用前后端...
尚硅谷《尚品甄选》项目前端部署到nginx服务
03-28
在这个场景下，"尚硅谷《尚品甄选》项目前端部署到nginx服务"是一个典型的实践，涉及到了前端开发与服务器配置的关键技术。Nginx是一款高性能、轻量级的Web服务器和反向代理服务器，常用于部署和管理前端应用。 ...
spzx-h5（尚品甄选H5）
07-24
1.1 业务功能介绍：首页、商品分类查询、关键字查询、商品详情、注册、登录、购物车模块、用户收货地址管理、订单模块、支付… 1.2 系统架构：前端架构：Uni-App 1.3 前端H5开发说明：前端H5部分我们不需要开发，...
尚硅谷《尚品甄选》用户端的前端工程项目部署到nginx服务
04-07
本项目涉及的是尚硅谷《尚品甄选》用户端的前端工程，该工程被部署到Nginx服务器上，使用默认端口911进行通信。接下来，我们将深入探讨相关知识点。 首先，Nginx是一个高性能的Web服务器和反向代理服务器，常用于...
前端不显示验证码图片
fujiang_xiao的博客
12-31 492
使用了 AWT 来生成图像，而 Spring Boot 应用是在没有图形环境的情况下运行（例如在 Docker 容器中）时，这时尝试了加载图形组件。（解决方案是在 java 启动参数中添加参数 "-Djava.awt.headless=true",采用 headless 模式运行 java 应用 ）查看日志，发现验证码正确生成了，但是在 docker 容器中缺少图形化界面，不能正确加载验证码对应的字体（找不到对应的类）打开控制台，发现验证码图片对应的响应状态码为500，是服务端的问题。库生成验证码的时候。
《尚品甄选》：权限管理之角色管理（debug一遍）
知识记录
11-25 1658
在后台管理系统中，权限管理是指为了保证系统操作的安全性和可控性，对用户的操作权限进行限制和管理。权限管理是后台管理系统中的一个重要功能模块。
记录chrome浏览器的一个bug
最新发布
yandong634的专栏
06-10 274
版本 139.0.7219.4（正式版本）dev （64 位）
git提交代码和解决冲突修复bug
weixin_55493330的博客
06-06 479
命令将当前工作区的修改保存起来，以便之后再恢复。如果修复bug的过程中出现问题，可以使用。命令回退到之前的提交或者使用。
Azure 虚拟机端口资源：专用 IP 和公共 IP Azure Machine Learning 计算实例BUG
2301_79306982的博客
06-07 972
但是，如果动态公共 IP 地址未附加到正在运行的虚拟机（例如，虚拟机已停止分配，或者 IP 地址已创建但未关联），则可能会产生少量费用。在虚拟机内部也失败（例如超时或连接拒绝），而 curl http://localhost:8080 成功，这可能指向虚拟机内部网络配置问题，阻止了通过公网 IP 回环访问自身服务，/24 的子网提供了 256 个 IP 地址。如果你的云实例（虚拟机）承载的服务需要一个不变的内部 IP 地址以便其他资源能够可靠地连接到它，或者需要基于 IP 的特定网络配置，则应选择。
如何判断一个bug，是前端还是后端的？
海姐软件测试的博客
06-10 556
**摘要：**作为测试工程师，精准判断Bug归属（前端/后端）的核心方法包括：1）通过抓包工具分析接口请求/响应数据，请求异常属前端，响应错误属后端；2）验证数据库与日志，数据未更新可能为后端问题；3）DOM操作验证UI层问题。典型前端Bug包括布局错乱、事件失效等，后端Bug多表现为5xx错误或逻辑缺陷。建议结合Mock测试、日志追踪和团队协作模板（如Jira+Swagger），基于数据证据而非主观猜测定位问题。掌握这套方法可高效解决90%的Bug归属问题。
【BUG】记STM32F030多通道ADC DMA读取乱序问题
学习日记
06-09 337
编码规范的重要性：结构体声明的位置不仅是语法问题，更影响代码可移植性。硬件机制的深度理解：结合芯片手册分析异常（如STM32F0校准值特性），能快速定位隐蔽问题。
尚硅谷尚品甄选前端
04-03
### 尚硅谷尚品甄选前端实现与学习资源 #### 一、项目概述 尚硅谷尚品甄选是一个综合性的电商类项目，其前端部分主要基于Vue框架构建。该项目旨在帮助开发者掌握前后端分离开发模式下的实际应用技能[^1]。 #### 二、技术栈分析 尚品甄选项目的前端采用了现代Web开发的技术栈，主要包括以下几个方面： - **Vue.js**: Vue作为核心框架负责页面渲染和状态管理。 - **Vuex**: 对于复杂的数据流场景，使用Vuex来集中管理和共享全局状态[^3]。 - **Axios**: 负责处理HTTP请求，用于从前端向后端发送数据并接收响应[^2]。 - **Element UI / Ant Design Vue**: 提供丰富的UI组件库支持快速搭建界面布局。 #### 三、常见问题及其解决方案 针对验证码图片无法显示的问题，在`api/login.js`以及`utils/request.js`中调整基础路径设置可以有效解决问题。具体操作为修正baseUrl定义位置避免重复拼接造成URL异常情况发生。 ```javascript // utils/request.js 修改示例 import axios from 'axios'; const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // 动态读取环境变量中的API地址 timeout: 5000, }); export default service; ``` #### 四、推荐的学习资源 对于希望深入理解尚品甄选项目或者提升自己在类似电商平台上的实战能力的同学来说，可以从以下几处着手获取资料： 1. 官方文档：熟悉Vue官方指南以及其他依赖工具如Vuex、Router等的基础教程； 2. 黑马程序员相关课程：提供完整的Java SE基础知识到高级企业级架构设计思路讲解； 3. 社区讨论与案例分享：参与GitHub开源社区寻找同类项目源码研究他人优秀实践方法； #### 五、总结建议 初学者应先打好HTML/CSS/JavaScript三大基石后再逐步接触MVVM思想进而过渡至更复杂的单页应用程序(SPA)制作流程当中去。随着经验积累适时引入状态管理模式优化大型系统的可维护性和扩展性。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

humannoid

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值