flutter - 如何将 Strapi 中的图像显示到 Flutter 应用程序中

Question

我创建了strapi 帐户，我想将图像从strapi Headless CMS 加载到Flutter 应用程序。我能够加载银行名称和描述等数据，但我无法使用 http 和 getAll() 从strapi 加载图像。我没有收到任何错误，但我无法从strapi 加载图像。你能帮助我吗？

我的代码在这里：（如果需要，我可以添加导入的库。）

   `import 'package:flutter/material.dart';
    import 'package:horizon/models/journey.dart';
    import 'package:http/http.dart' as http;
    import 'dart:async';
    import 'dart:convert';
    
    class JourneyPage extends StatefulWidget {
      @override
      _JourneyPageState createState() => _JourneyPageState();
    }
    
    class _JourneyPageState extends State<JourneyPage> {
      //Journeys journeys = Journeys(0, '', '', '');
      List<Journey> journeys = [];
      Future getAll() async {
        var data = await http.get('http://localhost:1337/apis/');
        var jsonData = json.decode(data.body);
    
        for (var u in jsonData) {
          journeys.add(
              Journey(u['id'], u['imageUrl'], u['journeyName'], u['description']));
        }
        return journeys;
      }
    
      @override
      Widget build(BuildContext context) {
        return Container(
          height: 400.0,
          child: Column(
            children: [
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 16.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      'Journeys.',
                      style: TextStyle(
                          fontFamily: 'AvenirNextLTPro',
                          fontSize: 24.0,
                          letterSpacing: 1.5,
                          fontWeight: FontWeight.bold,
                          color: Colors.black),
                    ),
                    ElevatedButton(
                      onPressed: () {
                        print('View all');
                      },
                      style: ElevatedButton.styleFrom(
                          side: BorderSide(color: Colors.black, width: 1.0),
                          primary: Colors.black),
                      child: Text(
                        'VIEW ALL',
                        style: TextStyle(
                            fontFamily: 'AvenirNextLTPro',
                            fontSize: 12.0,
                            letterSpacing: 1.5,
                            color: Colors.white),
                      ),
                    ),
                  ],
                ),
              ),
              SizedBox(height: 30.0),
              Container(
                margin: EdgeInsets.only(left: 12, right: 4),
                height: 260.0,
                color: Colors.white,
                child: FutureBuilder(
                  future: getAll(),
                  builder: (BuildContext context, AsyncSnapshot snapshot) {
                    if (snapshot.data == null) {
                      return Container(
                          child: Center(
                        child: Text('Loading...'),
                      ));
                    } else {
                      return ListView.builder(
                        scrollDirection: Axis.horizontal,
                        itemCount: 1,
                        itemBuilder: (BuildContext context, int index) {
                          return Container(
                            width: 260.0,
                            margin: EdgeInsets.only(left: 12.0, right: 8.0),
                            decoration: BoxDecoration(
                              border: Border.all(width: 1.0, color: Colors.grey),
                            ),
                            child: Stack(
                              alignment: Alignment.topCenter,
                              children: [
                                Positioned(
                                  bottom: 15.0,
                                  child: Container(
                                    width: 240.0,
                                    height: 49.0,
                                    color: Colors.white,
                                    child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceBetween,
                                      children: [
                                        Column(
                                          mainAxisAlignment: MainAxisAlignment.end,
                                          crossAxisAlignment:
                                              CrossAxisAlignment.start,
                                          children: [
                                            Text(snapshot.data[index].journeyName,
                                                style: TextStyle(
                                                    fontSize: 12.0,
                                                    fontWeight: FontWeight.normal,
                                                    letterSpacing: 1.1,
                                                    color: Colors.black)),
                                            Text(
                                              snapshot.data[index].description,
                                              style: TextStyle(
                                                  fontWeight: FontWeight.w600,
                                                  fontSize: 16.0,
                                                  color: Colors.black),
                                            ),
                                          ],
                                        ),
                                        Icon(
                                          Icons.bookmark_border,
                                          size: 38,
                                          color: Colors.black,
                                        ),
                                      ],
                                    ),
                                  ),
                                ),
                                Container(
                                  child: Stack(children: [
                                    Image(
                                      height: 260.0,
                                      width: 260.0,
                                      image:
                                          AssetImage(snapshot.data[index].imageUrl),
                                    ),
                                  ]),
                                ),
                              ],
                            ),
                          );
                        },
                      );
                    }
                  },
                ),
              )
            ],
          ),
        );
      }
    }
    `
    

这是我的班级模型

      class Journey {
          int id;
          String imageUrl;
          String journeyName;
          String description;
          Journey(
            this.id,
            this.imageUrl,
            this.journeyName,
            this.description,
          );
        }

标签： flutterdartstrapi

Answer 1

如果您使用Image.network()而不是，也许可以工作AssetImage()，如下所示：

Image.network(url)