image_network

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

Image Network 是一个 Flutter 包，旨在使用 CanvasKit 在 Web 上渲染图像，从而有效绕过通常阻碍 Web 环境中图像加载的 CORS 限制。通过利用 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.

📚 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

MIT License

搜索分类、插件与代码仓

安装插件