wordpress Flutter:如何从API调用图像

z3yyvxxp  于 2023-04-29  发布在  WordPress
关注(0)|答案(5)|浏览(155)

我有一个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(),
          );
        }
      },
    );
  }
}
snz8szmq

snz8szmq1#

您从API中获得的是已经预呈现的html内容。您在第一个屏幕截图中发布的代码是HTML代码,您可以在任何.html文件中运行它。你需要的是把图像从里面剥离出来。
会建议第一件事是尝试获得另一个WordPress API如果可能的话,返回与特定职位相关的图像。
如果您无法执行此操作,请尝试以下操作:

  • 将整个响应解析为字符串。
  • 使用字符串插值执行一系列split()方法。
  • 首先,按基本URL的模式分割,ie 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>,其中包含响应中的所有图像。

vohkndzv

vohkndzv2#

使用此库
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);
tkclm6bt

tkclm6bt3#

您可以将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);
c90pui9n

c90pui9n4#

你有没有试过Flutter dev食谱,它可以帮助你分配
访问https://docs.flutter.dev/cookbook/networking/fetch-data

nzk0hqpo

nzk0hqpo5#

只需在pubspec中更新环境变量就可以解决这个问题。yaml它应该看起来像这样:环境:sdk:'〉=2.12。0〈3.0.0'
另一个解决方案是删除!ofwww.example. www.example.com ![i]['title']['render'],但这不是最佳的解决方案。我建议你更新pubspect。亚姆勒

相关问题