Flutter调用WP REST API拉取WordPress文章时图片无法加载求解决方案

核心问题排查 #

• 多余的无效二次请求：你调用文章接口时已经加了_embed参数，返回结果里的wppost["_embedded"]["wp:featuredmedia"][0]["source_url"]本身就是特色图的直接访问链接，不需要再把这个图片链接当成API接口传入fetchWpPostImageUrl发起请求。该请求返回的是图片二进制数据，JSON解析直接失败，导致FutureBuilder一直停留在加载状态，图片无法显示。
• 请求参数类型错误：fetchWpPostImageUrl方法中直接把字符串类型的url传给http.get，新版http库要求必须传入Uri类型参数，就算发起请求也会直接抛出类型异常。

修复方案 #

直接去掉多余的二次图片请求逻辑，用已经拿到的图片链接直接加载即可，同时添加空判断和加载错误处理，避免部分文章没有特色图导致崩溃。

修改PostTile类代码 #

class PostTile extends StatefulWidget {
  final String? imageApiUrl, title, desc, excerpt;
  PostTile({this.imageApiUrl, this.title, this.desc, this.excerpt});

  @override
  _PostTileState createState() => _PostTileState();
}

class _PostTileState extends State<PostTile> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        if (widget.imageApiUrl?.isNotEmpty == true) {
          Navigator.push(
              context,
              MaterialPageRoute(
                  builder: (context) => PostPage(
                    title: widget.title ?? "",
                    imageUrl: widget.imageApiUrl ?? "",
                    desc: widget.desc ?? "",
                  )));
        }
      },
      child: Container(
        margin: EdgeInsets.only(top:8),
        padding: EdgeInsets.symmetric(horizontal: 16, vertical: 4),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 去掉原来的FutureBuilder，直接加载图片
            if (widget.imageApiUrl?.isNotEmpty == true)
              Image.network(
                widget.imageApiUrl!,
                // 加载中显示占位
                loadingBuilder: (context, child, loadingProgress) {
                  if (loadingProgress == null) return child;
                  return Center(child: CircularProgressIndicator());
                },
                // 加载失败显示占位图
                errorBuilder: (context, error, stackTrace) {
                  return Center(child: Icon(Icons.broken_image, size: 100, color: Colors.grey,));
                },
              )
            else
              // 没有特色图时显示占位
              Center(child: Icon(Icons.image, size: 100, color: Colors.grey,)),
            SizedBox(height: 8),
            Text(
              widget.title ?? "",
              style: TextStyle(fontSize: 22),
            ),
            SizedBox(height: 5),
            Text(widget.excerpt ?? "")
          ],
        ),
      ),
    );
  }
}

可选清理 #

wp-api.dart里的fetchWpPostImageUrl方法已经没有使用，可以直接删除，避免冗余代码。
如果需要兼容部分特殊场景保留该方法，需要修改参数类型：

Future fetchWpPostImageUrl(String url) async {
  final response = await http.get(Uri.parse(url), headers: {"Accept": "application/json"});
  var convertDatatoJson = jsonDecode(response.body);
  return convertDatatoJson;
}

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