当前位置：首页 > wzjs >正文

兰州电商网站建设西安专业网络推广公司

wzjs 2025/8/16 1:10:15

兰州电商网站建设,西安专业网络推广公司,做优秀网站,海南网站建设推广公司哪家好本周我的主要任务是关于专栏管理部分的完善。专栏图片的显示问题问题分析根据代码可知：图片URL来自于portfolio.headImgUrl，而且如果URL不存在的话，应该显示的是无图片，而网页中显示加载失败说明portfolio.headImgUrl应该是存…

本周我的主要任务是关于专栏管理部分的完善。

专栏图片的显示问题

问题分析

在这里插入图片描述

根据代码可知：图片URL来自于portfolio.headImgUrl，而且如果URL不存在的话，应该显示的是无图片，而网页中显示加载失败说明portfolio.headImgUrl应该是存在的，但是路径可能有问题。在控制台中的404报错也印证了这一点。
在这里插入图片描述

对其中的URL进行解码可以得到http://localhost:3000/portfolio/上传失败!，看来是图片在上传时就有问题，导致URL被拼接成了上传失败。
在这里插入图片描述
在后端进行DeBug调试时找到问题所在，原来是配置文件中的存储图片的目录的路径有问题，导致返回了一个上传失败。

问题解决

通过修改配置文件中的路径使其能够显示正常的路径而不是上传失败，但现在路径仍不是我们想要的路径，所以还需要将存到数据库中的图片路径逻辑进行修改。
在这里插入图片描述
现在图片已经能够正确存储在后端的static文件夹下，并且其URL正确的存储到了数据库中。

后端

然后需要找到前端向后端请求的函数：

fetchPostDetail({ commit }, params = {}) {// const delay = fetchDelay(//   isBrowser// )// if (isBrowser) {//   Vue.nextTick(() => {//     window.scrollTo(0, 300);//   })// }if (typeof params.portfolio_id === 'undefined') {commit('updateDetailData', getDefaultListData())return;}commit('updateDetailFetching', true)// commit('updateDetailData', {})return this.$axios.$get(`${PORTFOLIO_API_PATH}/detail/${params.portfolio_id}`).then(response => {return new Promise(resolve => {commit('updateDetailData', response)commit('updateDetailFetching', false)resolve(response)// delay(() => {//   resolve(response)// })})}).catch(error => {commit('updateDetailFetching', false)return Promise.reject(error)})}

上述函数通过调用后端接口（${PORTFOLIO_API_PATH}/detail/${params.portfolio_id}）获取作品集详情数据，更新到 Vuex store 的detail.data中，而作品集封面的URL就在detail.data中。

添加前端请求图片的接口并以base64编码的形式返回。

    @GetMapping("/image/{idPortfolio}/base64")public GlobalResult<String> getPortfolioImageAsBase64(@PathVariable Long idPortfolio, @RequestParam(defaultValue = "0") Integer type) throws IOException {// Get the portfolio DTO which contains the image pathPortfolioDTO portfolioDTO = portfolioService.findPortfolioDTOById(idPortfolio, type);if (portfolioDTO == null || portfolioDTO.getHeadImgUrl() == null) {throw new FileNotFoundException("Portfolio or image not found");}String path = portfolioDTO.getHeadImgUrl().replace("src/main/resources/", "");String extension = path.substring(path.lastIndexOf(".") + 1);// 3. 确定MIME类型String mimeType;switch (extension) {case "png":  mimeType = "image/png"; break;case "jpg":case "jpeg": mimeType = "image/jpeg"; break;case "gif":  mimeType = "image/gif"; break;case "svg":  mimeType = "image/svg+xml"; break;case "webp": mimeType = "image/webp"; break;default:     mimeType = "application/octet-stream";}ClassPathResource resource = new ClassPathResource(path);// Read file content and encode as base64try (InputStream inputStream = resource.getInputStream()) {byte[] fileContent = IOUtils.toByteArray(inputStream);String base64 = Base64.getEncoder().encodeToString(fileContent);String res = "data:" + mimeType + ";base64," + base64;GlobalResult<String> result = GlobalResultGenerator.genSuccessResult("success");result.setData(res);return result;} catch (IOException e) {throw new RuntimeException("加载图片失败: " + path, e);}}

前端

添加该函数单独获取base64编码的图片。

    async fetchImageAsBase64() {if(this.portfolio?.headImgUrl?.startsWith('data:image')){return;}try {if (!this.portfolio?.headImgUrl) return;if (this.portfolio.headImgUrl.startsWith('data:image')) {return this.portfolio.headImgUrl;}const response = await this.$axios.$get(`/api/portfolio/image/${this.portfolio.idPortfolio}/base64`,{ responseType: 'text' });this.imgUrl = response;console.log(this.imgUrl)} catch (error) {console.error('获取Base64图片失败:', error);return null; // 或返回占位图URL}}},