Flutter：如何从 API 调用图像答案

【问题标题】：Flutter: How to call images from APIFlutter：如何从 API 调用图像
【发布时间】：2022-06-18 07:11:47
【问题描述】：

我有一个 WordPress 博客，我正在尝试为该博客创建一个应用程序。在为博客使用 API 时，我无法找到正确的代码集来获取博客之间的图像我已经获取了博客的特色图像，但问题是在段落文本之间获取图像。现在，我得到的是这样的文本而不是图像。附上截图。

其次，在获取文本时，我将标签与文本一起获取，那么如何删除这些标签。附上截图。

这是我用来获取所有这些的代码：

import 'package:flutter/material.dart';
import 'package:thewritingparadigm/screens/post_details.dart';
import 'package:thewritingparadigm/service/post_data.dart';

class LatestPost extends StatefulWidget {
  const LatestPost({Key? key}) : super(key: key);

  @override
  State<LatestPost> createState() => _LatestPostState();
}

class _LatestPostState extends State<LatestPost> {
  Post postService = Post();

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<List>(
      future: postService.getAllPost(),
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          if (snapshot.data!.isEmpty) {
            return const Center(child: Text("No Post Available"));
          }
          return ListView.builder(
              shrinkWrap: true,
              itemCount: snapshot.data?.length,
              itemBuilder: (context, i) {
                return Card(
                  child: ListTile(
                    title: Column(
                      children: [
                        const SizedBox(
                          height: 20.0,
                        ),
                        SizedBox(
                          width: double.infinity,
                          height: 250.0,
                          child: Image.network(snapshot.data![i]["_embedded"]
                              !["wp:featuredmedia"][0]["source_url"]),
                        ),
                        const SizedBox(
                          height: 15.0,
                        ),
                        Text(
                          snapshot.data![i]['title']['rendered'],
                          style: const TextStyle(
                            fontSize: 25.0,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                      ],
                    ),
                    subtitle: Container(
                      padding: const EdgeInsets.only(
                          left: 5.0, right: 5.0, bottom: 25.0),
                      child: Text(
                        snapshot.data![i]['content']['rendered']
                            .toString()
                            .replaceAll("<p>", "")
                            .replaceAll("</p>", ""),
                        maxLines: 4,
                        overflow: TextOverflow.ellipsis,
                        style: const TextStyle(fontSize: 16.0),
                      ),
                    ),
                    onTap: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) =>
                              PostDetails(data: snapshot.data?[i]),
                        ),
                      );
                    },
                  ),
                );
              });
        } else if (snapshot.hasError) {
          return Center(
            child: Text(snapshot.error.toString()),
          );
        } else {
          return const Center(
            child: CircularProgressIndicator(),
          );
        }
      },
    );
  }
}

【问题讨论】：

我不明白你的问题，你能简单解释一下吗？
嘿！我已经更新了我的问题，希望我已经传达了我的问题，以便您可以帮助我。
我认为您将 API 响应作为 HTML 块获取。请以 JSON 对象的形式接收您的 API 响应。
其实这是我第一次使用 API，所以如果你能给我一些例子，如果它来自我的代码本身会很棒。
正如 Huthaifa 所说，您得到的是网站的 HTML 内容。如果我遇到你的情况，我会使用 Python Flask 创建一个 API，使用 BeautifulSoup4 抓取网站并仅返回所需的信息。

标签： wordpress flutter flutter-layout

【解决方案1】：

您从 API 获得的是已经预渲染的 html 内容。您在第一个屏幕截图中发布的代码是 HTML 代码，您可以在任何 .html 文件中运行它。您需要从中剥离图像。

如果可能，建议首先尝试获取另一个 wordpress API，以返回与特定帖子相关的图像。

如果您不能这样做，请尝试以下操作：

将整个响应解析为字符串。
使用字符串插值来执行一系列split()方法。
首先，按您的基本 url 的模式分割，即http://thewriting.../uploads/。以上将为您提供List<String>，每个元素将以/uploads/ 之后的内容开头并以someImageUrl.jpg somenumber.w 结尾。
在此列表中，执行forEach() 循环，在其中迭代每个元素，然后使用.split() 并使用模式".jpg"。它会给你一个包含两个字符串的列表，第一个元素是你想要的 url，第二个元素是你不需要的 rubish。
在每个相同的内部，进行拆分后，您将获取第一个 [0] 条目。
之后，您将 baseUrl 与带有 .jpg 的图像路径连接起来。你得到你的路径数组。

    final String _baseUrl = 'http://thewriting..../uploads/'; //write the entire url until uploads.

    List<String> _list = yourHtmlResponse.split(_baseUrl);

    _list.forEach((element) {
      element =_baseUrl + element.split('.jpg').first + '.jpg';
      print(element);//just to check how the url is looking so far.
    });

以上内容应为您提供List<String>，其中包含响应中的所有图像。

【讨论】：

【解决方案2】：

使用这个库

tap here

var document = parser.parse(response.body);
        var mainTag = document.getElementById('ppd');


        var imageUrl = mainTag.querySelector('#wp-block-image');
        var getImageData = imageUrl!
            .getElementsByTagName('img')
            .map((e) => e.attributes['src'])
            .first;
        print(getImageData);

【讨论】：

那里没有图书馆。
对不起，请重新检查

【解决方案3】：

您可以将您的 html 块转换为 json，如下所示：

它返回一个带有封装它的数组的 json。对于您的特定示例，jsonDecode 应该可以正常工作，只需使用数组的索引 0 即可访问 json。

var res = await http.Client()
    .get(Uri.parse('https:// your url here'));

var body = res.body;
var decoded = jsonDecode(body);
var json = decoded[0];

var response = 
json["tag1"][0]["tag2"];
print(response);

【讨论】：

【解决方案4】：

你试过颤振开发食谱了吗它可以帮助你分配

访问https://docs.flutter.dev/cookbook/networking/fetch-data

【讨论】：

【解决方案5】：

只需在 pubspec.yaml 中更新环境变量即可解决此问题它应该如下所示：环境： sdk: '>=2.12.0

另一个解决方案是删除 ! snapshot.data![i]['title']['rendered']，但这不是最佳解决方案。我建议你更新 pubspect.yaml

【讨论】：