拓展图片组件 (Extends image)

本项目演示了如何使用 CachedImage、FileImage、AssetImage、ResImage、PhotoView 及相关组件进行图片加载、缓存以及图片查看功能的实现。下面介绍了这些功能的具体实现和使用方法。

项目地址

项目概述

本项目提供了一套完整的图片加载与查看功能，包括缓存和本地加载机制，支持通过 CachedImage 加载并缓存网络图片，通过 FileImage 加载本地图片，通过 AssetImage 加载raw文件夹图片，ResImage 加载media目录图片，并支持使用 PhotoView 进行图片的查看与缩放。通过本项目，您可以轻松实现高效的图片加载与查看功能。

主要功能包括：

从网络加载并缓存图片
从本地文件加载图片
从raw文件夹加载图片
从media文件夹加载图片
使用 PhotoView 进行图片查看与缩放
错误日志与统计功能

安装

ohpm i @bigwinepot/extends_image

使用示例

主项目添加依赖：

ohpm i @bigwinepot/cache_manager

初始化缓存管理器

await cacheManager.init({
  enableLog: true,              // 启用日志记录
  logLevel: 'debug',            // 设置日志级别
  cleanupInterval: 3600000,     // 每小时清理一次缓存
  enableDiskCache: true,        // 启用磁盘缓存
  cachePath: '/path/to/cache'   // 设置缓存路径
});

CachedImage

CachedImage({
      url: 'https://picx.zhimg.com/v2-a096c2cd85dfcecba81581f6bfad8411_r.jpg?source=2c26e567',
      imageWidth: '100%',
      imageHeight: '200vp',
      imageRadius: '8vp'
    })

FileImage

FileImage({ pathOrUri: ‘path or uri’, imageWidth: '100%', imageHeight: '200vp' })

AssetImage

// rawfile目录下的文件 startIcon.png
AssetImage({ assetPath: 'startIcon.png', imageWidth: '100%', imageHeight: '200vp' })

ResImage

ResImage({ src: $r('app.media.app_icon'), imageWidth: '100%', imageHeight: '200vp' })

PhotoView

private photoController: PhotoViewController = new PhotoViewController();

Column() {
  PhotoView({ controller: this.photoController }) {
           this.CacheImageView()
        }
  }.width('100%').height('200vp')

贡献

欢迎提交 pull request 或 issues。如果您发现任何 bug 或有新的功能需求，欢迎反馈。以下是贡献指南：

Fork 该仓库。
创建您的分支 (git checkout -b feature/your-feature)。
提交您的更改 (git commit -am 'Add new feature')。
推送到分支 (git push origin feature/your-feature)。
创建 Pull Request。

License

本项目遵循 Apache-2.0 许可证，详情请参考 LICENSE。在这个文档中，我已经将你要求的代码示例（拓展图片组件）添加到 使用示例 部分。这个部分已经更新为详细展示如何使用 ExtendsImage 进行初始化，以及如何设置相关选项。

Introduction

图片拓展组件

Apache-2.0 ArkTS 5Commits

Customize your domain

README

Rulesets

ExtendsImage:基于图片组件的加载缓存与查看项目