Flutter应用调用Django托管API拉取图片却无法显示该如何排查？

先确认API返回的图片地址有效性 #

• 直接浏览器访问API地址https://pure-eyrie-09235.herokuapp.com/photoAPI，查看返回JSON中image字段的具体值
• 重点校验：如果image是相对路径（如/media/test.jpg），直接传给Image.network会加载失败，需拼接完整域名前缀，正确格式应为https://pure-eyrie-09235.herokuapp.com/media/test.jpg
• 单独复制JSON中的图片地址到浏览器访问，若浏览器无法打开，问题出在Django端配置；若浏览器可正常打开，问题出在Flutter端实现

Django端配置排查（图片地址浏览器无法访问时） #

• 检查settings.py中是否配置MEDIA_URL和MEDIA_ROOT
• 检查项目根路由urls.py是否添加媒体文件路由规则：

  from django.conf import settings
  from django.conf.urls.static import static
  
  urlpatterns = [
      # 原有路由配置
  ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
  

• 注意Heroku的本地文件系统为临时存储，重启服务后上传的本地图片会被清除，长期使用需对接持久化对象存储

Flutter端问题排查（图片地址浏览器可正常访问时） #

1. 修正API请求地址 #

• 现有代码中fetchPhotos的请求地址为https://pure-eyrie-09235.herokuapp.com/photoAPI，缺少末尾斜杠，若Django开启了默认的尾斜杠校验，会触发301重定向异常，需修改为https://pure-eyrie-09235.herokuapp.com/photoAPI/

2. 完善异常展示逻辑 #

• 现有代码仅打印错误未做页面展示，无法获取具体报错信息，修改FutureBuilder的builder逻辑：

  builder: (context, snapshot) {
    if (snapshot.hasError) {
      return Center(child: Text('加载失败: ${snapshot.error}'));
    }
    if (!snapshot.hasData) {
      return Center(child: CircularProgressIndicator());
    }
    return PhotosList(photos: snapshot.data);
  }
  

3. 优化图片加载组件配置 #

• 给Image.network添加加载状态和错误占位组件，快速定位加载异常原因：

  Image.network(
    photos[index].imageUrl,
    fit: BoxFit.cover,
    height: 60.0, width: 60.0,
    loadingBuilder: (context, child, loadingProgress) {
      if (loadingProgress == null) return child;
      return Center(child: CircularProgressIndicator());
    },
    errorBuilder: (context, error, stackTrace) {
      return Center(child: Icon(Icons.broken_image));
    },
  )
  

跨域配置排查 #

• 若API接口请求成功但图片加载失败，检查Django端CORS配置
• 确认django-cors-headers已安装，且在settings.py中完成对应配置：
  • INSTALLED_APPS添加corsheaders
  • MIDDLEWARE最顶部添加corsheaders.middleware.CorsMiddleware
  • 测试阶段可直接配置CORS_ALLOW_ALL_ORIGINS = True放开跨域限制

内容的提问来源于stack exchange，提问作者Hardy