Flutter NetworkImage 處理 403 錯誤

Question

在我的Flutter移動應用程序中，通過NetworkImage()加載用戶的個人資料圖像時，我收到403狀態代碼作為響應。

在出現403狀態代碼或圖像 URL 損壞等情況下，如何通過顯示資產文件夾中的圖像來處理此問題。

目前我已經通過向圖像 URL 發送HTTP GET請求並檢查狀態代碼是否為 200來處理它。 如果是 200，我使用NetworkImage() ，否則我使用AssetImage()加載圖像並使用FutureBuilder()構建小部件。

雖然這很有效，但我覺得處理這么小的場景很麻煩，而且可以以我不知道的更好的方式完成。

處理這種情況的最佳方法是什么？

Answer 1

您在這種情況下做得很簡單，我沒有發現任何問題：

  if (response.statusCode == 200) {
    return NetworkImage();
  } else {
    return AssetImage();
  }

Answer 2

我通過使用precacheImage實現了這一點。 這會將您的圖像預緩存到顫振緩存中。 它還有一個onError函數，你可以在緩存圖像時處理錯誤。

String validatedUrl;

precacheImage(
  NetworkImage(urlToCheck),
  context,
  onError: (
    exception,
    stacktrace,
  ) {
    print(exception.toString());
    setState(() {
      validatedUrl = '';
    });
  },
).whenComplete(() {
  if (validatedUrl == null) {
    setState(() {
      validatedUrl = urlToCheck;
    });
  }
});

然后validatedUrl要么為null，要么為空，要么帶有經過驗證的url。

• null -> 尚未驗證
• empty -> 下載圖像時出錯
• url -> 成功下載圖片

Answer 3

請嘗試以下方法。 在這里，如果圖像可用，它將加載網絡圖像，否則它將重定向到錯誤回調。 在錯誤回調中，您可以返回所需的小部件。 在您的情況下，您想從資產加載，以便您可以像下面這樣使用它。 如果要檢查錯誤狀態代碼，則需要解析我打印的異常。

 Image.network('https://www.outbrain.com/techblog/wp-content/uploads/2017/05/road-sign-361513_960_720.jpg',
            errorBuilder: (BuildContext context, Object exception, StackTrace? stackTrace) {
            print("Exception >> ${exception.toString()}");           
              return Image.asset('assets/images/lake.jpg');
            },
          )