fix(healthConsultation): 修复医生头像图片加载问题
- 将 a-image 组件替换为原生 img 标签以解决图片显示问题 - 移除 ant-design-vue 的 Image 组件依赖 - 添加图片加载失败时的错误处理函数 - 设置默认头像图片路径并实现错误回退机制 - 更新图片获取逻辑使用新的默认头像资源
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
@@ -11,7 +11,7 @@
|
||||
<div class="grid-container">
|
||||
<div v-for="item in page" :key="item.id" class="item">
|
||||
<div class="item-left">
|
||||
<a-image class="item-img" :preview="false" height="100%" :src="getFileUrl(item.photo)" />
|
||||
<img class="item-img" :src="getFileUrl(item.photo)" @error="onImgError" alt="" />
|
||||
</div>
|
||||
<div class="item-right">
|
||||
<div class="name">
|
||||
@@ -42,7 +42,8 @@
|
||||
import SwiperCore from 'swiper';
|
||||
import { Autoplay, Navigation } from 'swiper/modules'; // 修改此处导入路径
|
||||
// import defaultPng from '/@/assets/health/default.png';
|
||||
import { Image as AImage } from 'ant-design-vue';
|
||||
import defaultAvatar from '/@/assets/img/default_doc.png';
|
||||
// import { Image as AImage } from 'ant-design-vue';
|
||||
|
||||
import { getDocList } from '/@/views/healthConsultation/api/health';
|
||||
import { getAppEnvConfig } from '/@/utils/env.ts';
|
||||
@@ -64,10 +65,15 @@
|
||||
const { VITE_GLOB_API_URL } = getAppEnvConfig();
|
||||
function getFileUrl(path?: string) {
|
||||
const GATEWAY_URL = VITE_GLOB_API_URL;
|
||||
if (!path) return '/@/assets/health/default.png'; // 使用默认图片
|
||||
if (!path) return defaultAvatar;
|
||||
return `${GATEWAY_URL}/file/show/${path}`;
|
||||
}
|
||||
|
||||
// 图片加载失败时回退到默认头像
|
||||
function onImgError(e: Event) {
|
||||
(e.target as HTMLImageElement).src = defaultAvatar;
|
||||
}
|
||||
|
||||
// 安装 Swiper 模块
|
||||
SwiperCore.use([Autoplay, Navigation]);
|
||||
interface Doctor {
|
||||
|
||||
Reference in New Issue
Block a user