图片显示问题
# 图片显示问题
本文档针对商品图片显示问题进行解答和排查。
# 问题场景
情况描述：本地调试商品时，图片显示正常，但线上环境图片无法显示。
💡 说明：本地启动小程序时没有任何限制，但线上环境有严格的限制要求。
# 问题原因及解决方案
# 原因一：图片 URL 不是域名格式
问题：小程序图片的 URL 如果不是域名格式，线上无法显示。
解决方案：
- 确保图片 URL 使用完整的域名格式（如：
https://example.com/image.jpg） - 避免使用相对路径或 IP 地址
# 原因二：图片 URL 使用 HTTP 协议
问题：本地上传的图片使用 http 协议，而不是 https 协议，线上无法显示。
解决方案：
- 将所有图片 URL 从
http://改为https:// - 确保图片服务器支持 HTTPS 协议
# 原因三：小程序白名单未配置
问题：小程序的白名单未配置，导致图片请求被拦截。
解决方案：
- 在微信小程序后台配置服务器域名白名单
- 将图片服务器的域名添加到白名单中
配置位置参考：
# 排查步骤
检查图片 URL 格式
- 确认是否为完整的域名格式
- 确认是否使用 HTTPS 协议
检查小程序配置
- 登录微信小程序后台
- 检查服务器域名白名单配置
- 确认图片服务器域名已添加到白名单
验证图片服务器
- 确认图片服务器可正常访问
- 确认图片服务器支持 HTTPS
- 确认图片服务器未设置访问限制
# 注意事项
- ⚠️ 微信小程序线上环境要求：域名白名单 + HTTPS，两者缺一不可
- ⚠️ 本地开发环境不受这些限制，但线上环境必须满足以上要求
- 💡 建议在开发阶段就使用 HTTPS 和正确的域名格式，避免上线后出现问题