Hello everyone i have a problem to fetch data from the api first thing first i will show u the guide of the api for showing images :

Card Images Images are pulled from our image server images.ygoprodeck.com. You must download and store these images yourself!

Please only pull an image once and then store it locally. If we find you are pulling a very high volume of images per second then your IP will be blacklisted and blocked.

Our card images are in .jpg format and are web optimized.

All of our cloud URLs will either be https://images.ygoprodeck.com/images/cards/ (full size images), https://images.ygoprodeck.com/images/cards_small/ (small size images) or https://images.ygoprodeck.com/images/cards_cropped/ (cropped image art). You pass the ID of the card to retrieve the image.

Example Limit Reverse Card Image: https://images.ygoprodeck.com/images/cards/27551.jpg

The image URLs are found within the JSON response as image_url, image_url_small, and image_url_cropped, all within the card_images array.

Alternative artwork (if available) will also be listed within the card_images array.

Since v3: Card images are now properly returned without slashes being incorrectly escaped as it was with v2.

i have the api link i got the json data and convert it to dart i have the method i can fetch the data from it and it works of course but i have a problem with displaying the images from the api i will share my code and wait u guys to help me solve this problem

this is the page that i want to show the images and rest of the detail everything from the api is working except the images and i can't download all the images because and cuz it will be more then 13000 file so will cash them in the device storage anyways here is the the code :

class Home extends GetView<HomecontrollerImp> {
  final CardsModel? cardsModel;
  const Home({super.key, this.cardsModel});

  @override
  Widget build(BuildContext context) {
    Get.put(HomecontrollerImp());
    return Scaffold(
        appBar: AppBar(),
        body: GetBuilder<HomecontrollerImp>(
          builder: (controller) {
            if (controller.statusRequest == StatusRequest.loading) {
              return Center(child: const Text("loading"));
            } else if (controller.statusRequest ==
                StatusRequest.offlinefailure) {
              return const Text("offlinefailure");
            } else {
              return GridView.builder(
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2, childAspectRatio: 0.8),
                itemBuilder: (context, index) {
                  return Column(
                    children: [
                      CardsImages(cardImages: CardImages.fromJson(controller.data[index])),
                      Container(
                          height: 200,
                          width: 100,
                          child: Text(
                            "${controller.data[index]['name']}",
                            style: TextStyle(fontSize: 10),
                          ))
                    ],
                  );
                },
              );
            }
          },
        ));
  }
}

and this is the the class for showing the images

class CardsImages extends StatelessWidget {
  

  final CardImages cardImages ;
  const CardsImages({super.key, required this.cardImages});

  @override
  Widget build(BuildContext context) {
    HomecontrollerImp controller = Get.put(HomecontrollerImp());

     

    return Image.network("${AppLink.smallimages}}/${cardImages.imageUrlSmall}") ;
  }
}

the result of the code after hot restarting ════════ Exception caught by image resource service ════════════════════════════ HTTP request failed, statusCode: 404, https://images.ygoprodeck.com/images/cards_small}/null

i guess the problem in my code or i understood the guide in the wrong way any one can help ??

abstract class Homecontroller extends GetxController {
  getdata();
  getImages() ;
  
  StatusRequest statusRequest = StatusRequest.initial; 
  }


class HomecontrollerImp extends Homecontroller {
  List data = [];
  List getImage = [] ;
  

 

  HomeData homeData = HomeData(Get.find());
  ImageData imageData =  ImageData(Get.find()) ;
  


  var isLoading = false;


   @override
  void onInit() {
    getImages() ;
    getdata();
    update();

    super.onInit();
  }

  @override
  getdata() async {
    statusRequest = StatusRequest.loading;
    var response = await homeData.getData();
    statusRequest = handlingData(response);
    if (StatusRequest.success == statusRequest) {
      data.addAll(response['data']);
    }else{
        statusRequest = StatusRequest.failure ;

    }
    update();
  }
  
  @override
  getImages() async {
    statusRequest = StatusRequest.loading;
    var response = await imageData.getData();
    statusRequest = handlingData(response);
    if (StatusRequest.success == statusRequest) {
      getImage.addAll(response['data']);
    }else{
        statusRequest = StatusRequest.failure ;

    }
    update();
    
  }
  
  


  
  }

the app link page :

class AppLink {

 static const String server = "https://db.ygoprodeck.com/api/v7/cardinfo.php" ;
 static const String smallimages = "https://images.ygoprodeck.com/images/cards_small" ;


}

CodePudding user response：

We can use the cached_network_image: ^3.2.3 package and load from cached network and another way is return Image.network("${AppLink.smallimages}}/${cardImages.imageUrlSmall}") ;

null check and after that show.

CodePudding user response：

Please update :

                 Column(
                        children: [
                          controller.data[index]["image path"]),
                          Container(
                              height: 200,
                              width: 100,
                              child: Text(
                                "${controller.data[index]['name']}",
                                style: TextStyle(fontSize: 10),
                              ))
                        ],

Also,

class CardsImages extends StatelessWidget {
  

  final String cardImages ;
  const CardsImages({super.key, required this.cardImages});

  @override
  Widget build(BuildContext context) {
    HomecontrollerImp controller = Get.put(HomecontrollerImp());

     

    return Image.network("${AppLink.smallimages}}/${cardImages}") ;
  }
}