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

山东大学软件学院项目实训-基于大模型的模拟面试系统-网页图片显示问题

ai 2025/7/5 22:13:48

具体专栏图片显示问题

在这里插入图片描述
根据之前对于图片显示的修改，图片能够正常显示，但是只能够显示一瞬间，不到一秒钟之后图片就又变成上图所示的情况。

下面对于该问题进行修改：

我尝试了许多方案，一开始我以为是图中控制台下面的那个GET请求报错的问题，然后通过这一个线索进行排错，但是尝试了很久之后还是没有解决。
之后我就想看看图片显示用到的imgUrl和portfolio.idPortfolio在图片无法显示时它们的值是什么，于是我直接将imgUrl和portfolio.idPortfolio输出到页面上，发现在图片无法显示时它们的值还是正常的。于是，我把源码和问题描述给了AI，一开始它并没有给出正确答案，而是给了一下几个原因分析：

fetch 钩子异步加载数据后覆盖了 imgUrl，你在 mounted 里调用了 fetchImageAsBase64()，它会设置 imgUrl。但 fetch() 钩子（或 asyncData）可能稍后加载 portfolio 数据，导致 imgUrl 被重置（比如portfolio.headImgUrl 为空）。
portfolio 数据变化触发了重新渲染，如果 portfolio 是 computed 属性（来自 Vuex），当 fetchDetail 完成后，portfolio更新，可能间接导致 imgUrl 被清空。
el-image 组件内部处理 Base64 的问题，el-image 可能会对 src 进行额外处理，如果 imgUrl 变化，可能会导致图片闪烁。

之后它又给出了一个可行的方案：

el-image 默认支持 Base64，但如果你的 Element UI 版本较旧，可能存在兼容性问题。

于是我尝试把el-image改为image，但这一改改“错”了，我把

<el-image>// 正常图片
</el-image>
<el-image>// 无图片
</el-image>

改成了

<el-image>// 正常图片
</el-image>
<image>// 无图片
</image>

但图片能够正常显示了。

后来发现可能是因为组件中的v-if条件写的不规范导致的。

修改前的代码：

<el-col :span="8" v-if="imgUrl"><el-imagestyle="width: 200px;height: 200px;border-radius: 16px;background: #f5f7fa;border: #f5f7fa solid 1px;":src="imgUrl" :preview-src-list="[imgUrl]" lazy></el-image>
</el-col>
<el-col :span="8" v-else><el-imagestyle="width: 200px;height: 200px;border-radius: 16px;background: #f5f7fa;border: #f5f7fa solid 1px;"><div slot="error"style="display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;background: #f5f7fa;color: #909399;">无图片</div></el-image>
</el-col>

修改后能正常显示的代码：

<el-col :span="8" v-if="imgUrl != null"><el-imagestyle="width: 200px;height: 200px;border-radius: 16px;background: #f5f7fa;border: #f5f7fa solid 1px;":src="imgUrl" :preview-src-list="[imgUrl]" lazy></el-image>
</el-col>
<el-col :span="8" v-else><el-imagestyle="width: 200px;height: 200px;border-radius: 16px;background: #f5f7fa;border: #f5f7fa solid 1px;"><div slot="error"style="display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;background: #f5f7fa;color: #909399;">无图片</div></el-image>
</el-col>

专栏管理页面图片显示问题

在这里插入图片描述

这部分可以复用上述的部分代码，但也有些不同，因为这次不是单一图片的显示，而是需要一个列表来存储id和图片，然后在显示的时候通过id展示相应的图片。

<el-col :xs="24" :sm="12" :md="12" v-for="portfolio in portfolios.list" :key="portfolio.idPortfolio"><el-col style="margin-bottom: 20px;"><el-card><el-col :span="12"><el-image :src="getImageUrl(portfolio.idPortfolio)"style="width:96px;height: 96px;border-radius: 10px;background: #f5f7fa;border: #f5f7fa solid 1px;"fit="cover":preview-src-list="previewImageList"><div slot="error"style="display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;background: #f5f7fa;color: #909399;">无图片</div></el-image></el-col><el-col :span="12" style="padding-top: 30px;text-align: right;"><el-button @click="onRouter('portfolio', portfolio.idPortfolio)" round>阅读</el-button></el-col><el-col style="padding-top: 20px;font-size: 16px;line-height: 22px;font-weight: 500;margin-bottom: 4px;"><span class="portTitle" v-html="portfolio.portfolioTitle"></span></el-col><el-col style="padding-bottom: 20px;font-size: 14px;"><span>{{ portfolio.articleNumber || 0 }} 篇文章</span></el-col></el-card></el-col>
</el-col>

上述对于组件的修改主要是添加了一个函数（如下），来计算当前应该显示的图片的URL。

// 根据 portfolio.idPortfolio 获取对应的图片URL
getImageUrl(portfolioId) {const found = this.imgList.find(item => item.id === portfolioId);return found ? found.url : '';
}

在一开始，我们就需要根据portfolios.list获取所有的图片列表存起来，供之后使用。

mounted() {console.log(this.portfolios.list);if (this.portfolios.list && Array.isArray(this.portfolios.list)) {for (const portfolio of this.portfolios.list) {this.fetchImageAsBase64(portfolio.idPortfolio);}}console.log(this.imgList.length); 
},
computed: {// 提取imgList中的所有URL用于预览previewImageList() {return this.imgList.map(item => item.url);},
}

下面的函数就是复用之前的函数稍加修改了一下，注释掉的就是之前的函数被删除的部分。

async fetchImageAsBase64(id) {try {const response = await this.$axios.$get(`/api/portfolio/image/${id}/base64`,{ responseType: 'text' });this.imgList.push({id: id,url: response});console.log(this.imgList)// this.imgUrl = response;} catch (error) {console.error('获取Base64图片失败:', error);} finally {this._fetchingImage = false;}
},