xiaoli/peixue-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
main
peixue-dev/Archive/[一次性]家长端图片渲染修复-2026-02-01.md

4.7 KiB
Raw Permalink Blame History

家长端图片渲染修复说明

问题描述

家长端首页功能图标区域出现多个图片加载失败（404错误），控制台显示：

  • [渲染层网络层错误] Failed to load image
  • 多个图床链接返回404状态码

问题原因

  1. 标签文字不准确：

    • "研学活动" 应该是 "学习陪伴"（对应study图标）
    • "专项突破" 应该是 "专项提升"（对应special图标）

  2. 图片链接已正确：

    • 所有图片链接都使用了正确的图床地址
    • 链接格式混合使用了 i.imglt.com 和 www.imglt.com/storage/thumbnails

修复内容

文件：peidu/uniapp/src/pages/index/components/UserHome.vue

修改了功能图标的标签文字：

functionIcons: [
  // 第一行
  { id: 1, icon: 'https://i.imglt.com/20260131/a1006022d1d223f217a5f86817062f6b.jpg', label: '陪伴员', path: '/pages/teacher/list' },
  { id: 2, icon: 'https://i.imglt.com/20260131/6ad513b0e6f173a43dd62ef3a4734e90.jpg', label: '暑假营', path: '/activity-package/pages/camp/list' },
  { id: 3, icon: 'https://i.imglt.com/20260131/67f18806536d0d630e3f91bd27b0b292.jpg', label: '测评师', path: '/service-package/pages/assessment/index' },
  { id: 4, icon: 'https://www.imglt.com/storage/thumbnails/20260131/095ba956285b55e12831e7c2aac36c25.jpg', label: '成长规划师', path: '/service-package/pages/planning/index' },
  { id: 5, icon: 'https://i.imglt.com/20260131/5a24d6326803bddccc760c8bb14a8966.jpg', label: '家长学院', path: '/activity-package/pages/academy/index' },
  // 第二行
  { id: 6, icon: 'https://www.imglt.com/storage/thumbnails/20260131/927acae023ae4b096743b11b5fd61584.jpg', label: '一对一陪伴', path: '/pages/service/list', params: { category: '基准式陪伴' } },
  { id: 7, icon: 'https://i.imglt.com/20260131/82b621c15af3cbf6d5872d9634c4d0ed.jpg', label: '学习陪伴', path: '/activity-package/pages/study-tour/category' },  // ✅ 修改
  { id: 8, icon: 'https://i.imglt.com/20260131/06e6657604d4ece7d12638b782a3c18e.jpg', label: '专项提升', path: '/service-package/pages/special/list' },  // ✅ 修改
  { id: 9, icon: 'https://www.imglt.com/storage/thumbnails/20260131/f808f9fed920b006661ae73920e8aa08.jpg', label: '兴趣培养', path: '/activity-package/pages/interest/category' },
  { id: 10, icon: 'https://i.imglt.com/20260131/93139ad384709fb90d24954d7039cc34.jpg', label: '线上督学', path: '/activity-package/pages/supervision/category' }
]

图片对应关系

图标 标签 图床链接
companion 陪伴员 https://i.imglt.com/20260131/a1006022d1d223f217a5f86817062f6b.jpg
summer 暑假营 https://i.imglt.com/20260131/6ad513b0e6f173a43dd62ef3a4734e90.jpg
assessor 测评师 https://i.imglt.com/20260131/67f18806536d0d630e3f91bd27b0b292.jpg
planner 成长规划师 https://www.imglt.com/storage/thumbnails/20260131/095ba956285b55e12831e7c2aac36c25.jpg
parent 家长学院 https://i.imglt.com/20260131/5a24d6326803bddccc760c8bb14a8966.jpg
one-one 一对一陪伴 https://www.imglt.com/storage/thumbnails/20260131/927acae023ae4b096743b11b5fd61584.jpg
study 学习陪伴 https://i.imglt.com/20260131/82b621c15af3cbf6d5872d9634c4d0ed.jpg
special 专项提升 https://i.imglt.com/20260131/06e6657604d4ece7d12638b782a3c18e.jpg
interest 兴趣培养 https://www.imglt.com/storage/thumbnails/20260131/f808f9fed920b006661ae73920e8aa08.jpg
supervision 线上督学 https://i.imglt.com/20260131/93139ad384709fb90d24954d7039cc34.jpg

验证步骤

  1. 清除缓存并重新编译：

    执行：Archive/[一次性]清除缓存重新编译-家长端图片修复-2026-02-01.bat

  2. 在微信开发者工具中检查：

    • 点击"编译"按钮
    • 查看家长端首页
    • 确认所有10个功能图标都正常显示
    • 检查控制台是否还有404错误

  3. 功能测试：

    • 点击每个图标，确认跳转路径正确
    • 验证标签文字与图标内容匹配

注意事项

  1. 图床链接格式：

    • 部分使用 i.imglt.com（完整图片）
    • 部分使用 www.imglt.com/storage/thumbnails（缩略图）
    • 两种格式都是有效的，根据图床返回的链接使用

  2. 不使用本地图片：

    • 已完全使用网络图床链接
    • 不再依赖 static 目录中的图片文件
    • 减小小程序包体积

  3. 标签文字准确性：

    • "学习陪伴" 对应 study 图标
    • "专项提升" 对应 special 图标
    • 确保文字与图标内容一致

修复完成

✅ 修改了标签文字，使其与图标内容匹配 ✅ 保持了所有图床链接不变 ✅ 创建了重新编译脚本 ✅ 文档记录了所有修改内容