>source

네트워크 이미지를 얻을 수 있고 네트워크 이미지를 표시할 수 있는 삼항 연산자를 사용했지만 네트워크 이미지가 그리드의 기본 이미지가 잘못된 경우 기본 자산 이미지를 표시할 수 없습니다.

저는 플러터가 처음입니다.

image: NetworkImage(products[index]
                                              .productImageList[0]
                                  )!= null
                                      ? NetworkImage(
                                      products[index].productImageList[0])
                                      :Image.asset("assets/defimg.jpg"),
                                  fit: BoxFit.fitHeight ),

인덱스 0에 네트워크 이미지를 표시하지만 네트워크 이미지가 유효하지 않거나 null인 자산 이미지를 로드하지 않고 이 오류를 발생시킵니다.

════════ Exception caught by image resource service ════════════════════════════════════════════════
The following _Exception was thrown resolving an image codec:
Exception: Invalid image data
When the exception was thrown, this was the stack:
#0      _futurize (dart:ui/painting.dart:5230:5)
#1      ImageDescriptor.encoded (dart:ui/painting.dart:5098:12)
#2      instantiateImageCodec (dart:ui/painting.dart:1998:60)
<asynchronous suspension>

이 후에 나는 try/catch를 시도했습니다. try catch가 있는 내 code는 --

child: Builder(builder: (BuildContext context) {
                              try {
                                return Center(
                                  child: Image.network(
                                      products[index]
                                                .productImageList[0],
                                      fit: BoxFit.contain,
                                  ),
                                );
                              } catch (e) {
                                print("Got exception ${e.toString()}");
                                return Image.asset("assets/defimg.jpg", fit: BoxFit.contain);
                              }
                            }),

위와 같은 오류가 발생합니다.

이미지 응답은 아래와 같이 "productImageList" 목록의 API에서 제공됩니다. --

        "sellingPrice": "4000",
            "productImageList": [
                "https://www.xyzz.com/postadsimages/img/23682201.jpg"
            ],
            "createdDate": 1607754473000,

  • 답변 # 1

    캐시된 네트워크 이미지

    이미지 네트워크 대신 cachedNetworkImage를 사용할 수 있습니다.

    CachedNetworkImage(
                      imageUrl:
                          "https://store4.gofile.io/download/361b6d89-e4a7-4444-a725-a32bdbfefba6/WhatsApp%20Image%202021-11-03%20at%209.38.00%20PM.jpeg",
                      height: 25.h,
                      width: 100.w,
                      fit: BoxFit.fill,
                    )
    

    또는

    CachedNetworkImage(
                      imageUrl: imageURL,
                      fit: BoxFit.fill,
                      placeholder: (context, url)=> Padding(
                        padding: EdgeInsets.all(18.0),
                        child: CircularProgressIndicator(
                            strokeWidth: 2, color: MyColors.primary),
                      ),
                      errorWidget: (context, url, error)=>                      Icon(Icons.person, color: MyColors.grey),
                    )
    

  • 답변 # 2

    이미지.네트워크네트워크 요청의 로드 및 오류 상태를 모두 처리할 수 있지만 시도한 방식은 처리할 수 없습니다.

    대신 해야 할 일의 예를 보여 드리겠습니다.

    //Just to DRY
    final Image noImage= Image.asset("assets/defimg.jpg");
    final imageUrl= products[index].productImageList[0];
    //Now, in the widget's image property of your first example:
    image: (imageUrl != null) //Only use the network image if the url is not null
      ? Image.network(
          imageUrl,
          loadingBuilder: (context, child, loadingProgress)=>          (loadingProgress== null) ? child : CircularProgressIndicator(),
          errorBuilder: (context, error, stackTrace)=> noImage,
        )
      : noImage;
    

    이 방법으로 잘못된 이미지 데이터예외를 처리하고 네트워크에서 아직 가져오는 동안 다른 이미지를 표시할 수도 있습니다.

    PS: 자산을 로드한 후 페이딩 효과를 원하는 경우에도 사용할 수 있습니다.

    좋은 답변 감사합니다. FadeInImage.assetNetwork를 사용하는 방법을 설명하시겠습니까? Image.network로 교체를 시도했지만 FadeInImage.assetNetwork에는 errorBuilder 매개변수가 없습니다. 감사 해요!

    Abushawish2021-11-25 17:55:59

    천만에요! 문서에 예가 있습니다. 오류를 처리하기 위해 _ imageErrorBuilder_ 인수를 사용할 수 있습니다. 이전 답변에서 언급했듯이 FadeInImage.assetNetwork에 대한 자세한 내용은 여기를 참조하세요.

    Yago Estévez2021-11-25 17:55:59
  • 이전 javascript : 입력 유형=비밀번호에서 microsoft edge eye/reveal 아이콘 가용성을 감지하는 기능을 제공하는 방법
  • 다음 JavaScript ES6에서 iterable과 iterator의 차이점은 무엇입니까?