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 class="grid-container">
|
||||||
<div v-for="item in page" :key="item.id" class="item">
|
<div v-for="item in page" :key="item.id" class="item">
|
||||||
<div class="item-left">
|
<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>
|
||||||
<div class="item-right">
|
<div class="item-right">
|
||||||
<div class="name">
|
<div class="name">
|
||||||
@@ -42,7 +42,8 @@
|
|||||||
import SwiperCore from 'swiper';
|
import SwiperCore from 'swiper';
|
||||||
import { Autoplay, Navigation } from 'swiper/modules'; // 修改此处导入路径
|
import { Autoplay, Navigation } from 'swiper/modules'; // 修改此处导入路径
|
||||||
// import defaultPng from '/@/assets/health/default.png';
|
// 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 { getDocList } from '/@/views/healthConsultation/api/health';
|
||||||
import { getAppEnvConfig } from '/@/utils/env.ts';
|
import { getAppEnvConfig } from '/@/utils/env.ts';
|
||||||
@@ -64,10 +65,15 @@
|
|||||||
const { VITE_GLOB_API_URL } = getAppEnvConfig();
|
const { VITE_GLOB_API_URL } = getAppEnvConfig();
|
||||||
function getFileUrl(path?: string) {
|
function getFileUrl(path?: string) {
|
||||||
const GATEWAY_URL = VITE_GLOB_API_URL;
|
const GATEWAY_URL = VITE_GLOB_API_URL;
|
||||||
if (!path) return '/@/assets/health/default.png'; // 使用默认图片
|
if (!path) return defaultAvatar;
|
||||||
return `${GATEWAY_URL}/file/show/${path}`;
|
return `${GATEWAY_URL}/file/show/${path}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 图片加载失败时回退到默认头像
|
||||||
|
function onImgError(e: Event) {
|
||||||
|
(e.target as HTMLImageElement).src = defaultAvatar;
|
||||||
|
}
|
||||||
|
|
||||||
// 安装 Swiper 模块
|
// 安装 Swiper 模块
|
||||||
SwiperCore.use([Autoplay, Navigation]);
|
SwiperCore.use([Autoplay, Navigation]);
|
||||||
interface Doctor {
|
interface Doctor {
|
||||||
|
|||||||
Reference in New Issue
Block a user