搜尋分類、套件與程式碼儲存庫

image_network 封面
套件詳情v2.6.0

image_network

Image Network 是一個套件,可讓您在 Web 上使用 CanvasKit 渲染影像,而不會遇到 CORS 問題。

iOSWeb
近 30 天下載
1.2萬
喜歡數
160
Pub 分數
150

安裝套件

flutter pub add image_network

套件介紹

根據套件公開資料產生的選型評估,僅供參考。

Image Network 是一個 Flutter 套件,專門用於在 Web 上使用 CanvasKit 渲染影像,有效繞過常見的 CORS 限制,這些限制通常會阻礙 Web 環境中的影像載入。透過利用 CanvasKit,它能無需伺服器端設定,即可順暢顯示來自外部來源的影像。此套件特別適用於高度依賴遠端影像資源且需要在不同平台間保持一致呈現效果的應用程式。它支援 iOS 與 Web 平台,確保跨平台相容性。

適用情境

  • 在網頁上載入遠端圖片而不需CORS問題
  • 在 Flutter Web 應用中使用 CanvasKit 渲染圖像
  • 可靠地顯示用戶上傳或第三方的圖片
  • 在基於Web的Flutter應用中整合動態圖像內容
  • 確保跨平台的一致性圖像渲染

主要特色

  • 使用 CanvasKit 進行網頁圖像渲染
  • 繞過網頁上的 CORS 限制
  • 支援 iOS 和 Web 平台
  • 透過 pub add 簡單整合
  • 遠端圖像的優化效能

適合對象

  • 使用遠端圖像來源的 Flutter Web 開發人員
  • Web 上需要可靠圖像加載的應用程式
  • 開發人員在處理與 CORS 相關的圖像載入問題
  • 跨平台 Flutter 項目,具有圖像密集型使用者介面
  • 利用 CanvasKit 進行圖形處理的項目

使用建議

  • 僅限網頁和iOS平台
  • 需要 Web 結構中的 CanvasKit 支援
  • 對於大圖像可能有性能開銷
  • 不適用於原生 Android 或桌面端
  • 依賴外部圖像URL的可訪問性

原始 README

以下為關聯原始碼儲存庫的 README 原文快照,最新內容請造訪原始碼儲存庫。

🌐 Image Network

Image Network is a package that allows you to render images on the web using CanvasKit without having problems with CORS.

Build

📚 Features

  • Image Manager (Android - iOS - Web)
  • Use the CanvasKit renderer
  • No problems with CORS
  • Fast loading
  • Image cache (Android && iOS)
    • Recommended using with CachedNetworkImage version 2.2.0 or newer
  • Image from Url:
    • (Web) accept http or https image
    • (Android && iOS) accept https images
  • Supported Image Formats
    • PNG
    • JPEG
    • GIF / Animated GIF

🔌 Installation

Add image_network as a dependency in your pubspec.yaml file .

Import Image Network:

import 'package:image_network/image_network.dart';

👨‍💻 How To Use

URL Image
String imageUrl = "https://storage.googleapis.com/cms-storage-bucket/a9d6ce81aee44ae017ee.png";
Image Network
ImageNetwork(
    image: imageUrl,
    height: 350.0,
    width: 240.0,
    duration: 1500,
    curve: Curves.easeIn,
    onPointer: true,
    debugPrint: false,
    backgroundColor: Colors.blue,
    fitAndroidIos: BoxFit.cover,
    fitWeb: BoxFitWeb.cover,
    borderRadius: BorderRadius.circular(70),
    onLoading: const CircularProgressIndicator(
      color: Colors.indigoAccent,
    ),
    onError: const Icon(
      Icons.error,
      color: Colors.red,
    ),
    onTap: () {
      debugPrint("©gabriel_patrick_souza");
    },
  )

☀️ License

Copyright (c) 2021 Gabriel Patrick Souza

MIT License

所屬分類

依賴

依賴清單 2 項

  • http>=0.13.6 <2.0.0
  • webviewimage>=0.0.4 <1.0.0

原始碼儲存庫

使用此套件的專案