Flutter: So rufen Sie Bilder von der API auf

Ich habe einen WordPress-Blog und versuche, eine App für diesen Blog zu erstellen. Während ich eine API für das Blog verwende, kann ich nicht den richtigen Codesatz finden, um Bilder abzurufen, die sich zwischen dem Blog befinden. Ich habe das vorgestellte Bild des Blogs abgerufen, aber das Problem besteht darin, die Bilder zwischen Absatztext abzurufen. Im Moment bekomme ich solche Texte anstelle der Bilder. Screenshots anbei.

Zweitens bekomme ich beim Abrufen des Textes die Tags zusammen mit dem Text, also wie kann ich diese Tags entfernen. Screenshot anbei.

Hier ist mein Code, den ich verwende, um all diese abzurufen:

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(),
          );
        }
      },
    );
  }
}

Was Sie von der API erhalten, ist der bereits vorgerenderte HTML-Inhalt. Der Code, den Sie im ersten Screenshot gepostet haben, ist HTML-Code, Sie können ihn in jedem ausführen .html Datei. Was Sie brauchen, ist, die Bilder davon zu entfernen.

Ich würde vorschlagen, als erstes zu versuchen, wenn möglich, eine andere WordPress-API zu erhalten, um die Bilder zu einem bestimmten Beitrag zurückzugeben.

Wenn dies nicht möglich ist, versuchen Sie Folgendes:

• Analysieren Sie die gesamte Antwort als Zeichenfolge.

• Verwenden Sie die Zeichenfolgeninterpolation, um eine Reihe von auszuführen split() Methoden.

• Teilen Sie zuerst durch das Muster, das Ihre Basis-URL ist, dh http://thewriting.../uploads/. Das Obige gibt Ihnen a List<String>beginnt jedes Element mit dem, was danach kommt /uploads/ und endet mit someImageUrl.jpg somenumber.w.

• Führen Sie in dieser Liste a forEach() Schleife, in der Sie jedes Element durchlaufen und dann verwenden .split() und verwende das Muster ".jpg". Es wird Ihnen eine Liste mit zwei Zeichenfolgen geben, das erste Element ist die gewünschte URL, das zweite Element ist Unsinn, den Sie nicht brauchen.

• Innerhalb der gleichen für jeden, nachdem Sie die Aufteilung gemacht haben, nehmen Sie die erste [0] Eintrag.

• Danach verketten Sie Ihre baseUrl mit dem Bildpfad mit .jpg. Und Sie erhalten eine Reihe von Pfaden.

    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.
    });

Das obige sollte Ihnen ein bringen List<String> die alle Bilder in der Antwort hat.

Verwenden Sie diese Bibliothek

hier drücken

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);

Sie können Ihren HTML-Block wie folgt in JSON konvertieren:

Es gibt ein json mit einem Array zurück, das es kapselt. Für Ihr spezielles Beispiel sollte jsonDecode gut funktionieren, nehmen Sie einfach den Index 0 des Arrays, um auf den json zuzugreifen.

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);

Haben Sie das Flutter-Dev-Kochbuch ausprobiert, es könnte Ihnen helfen, es zuzuteilen

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