【HR】让小白也能轻松搞定图片开发

1. 用户配置信息在加载图片前，用户需根据自身需求配置相应的参数，包括图片路径、图片大小、占位图及缓存策略等。ImageKnife提供了RequestOption类，用于封装用户配置信息的接口，如图3所示列举了部分接口供大家参考：

图 用户配置参数 通过ImageKnifeExecute()方法获取用户配置信息，然后执行ImageKnife.call(request)，正式启动图片加载任务。相关实现代码如下： 复制代码imageKnifeExecute() { // 首先需要确保获取ImageKnife单例对象 if(ImageKnife){ }else{ ImageKnife = globalThis.exports.default.data.imageKnife; } // 生成配置信息requestOption let request = new RequestOption(); // 配置必要信息和回调 this.configNecessary(request); // 配置缓存相关信息 this.configCacheStrategy(request); // 配置显示信息和回调 this.configDisplay(request); // 启动ImageKnife执行请求 ImageKnife.call(request);}复制代码2. 加载图片加载图片过程是ImageKnife组件的核心部分，如图4所示，包含占位图填充、缓存实现及图片解码三个环节。下面我们将为大家分别介绍每个环节的实现。 (1) 占位图填充 占位图就是图片加载过程中页面上的过渡效果，通常表现形式是在页面上待加载区域填充灰色的占位图，可以使得页面框架不会因为加载失败而变形。ImageKnife提供了占位图功能，开发者可在RequestOption中配置是否启动占位图任务。 如图5所示是占位图工作流程，执行图片加载任务后，占位图会填充加载页面。如果图片解析成功则将页面上填充的占位图替换为待加载的图片。如果图片解析失败，则将页面上填充的占位图替换为“图片解析失败占位图”。

图 占位图工作流程 相关实现代码如下： 复制代码// 占位图解析成功placeholderOnComplete(imageKnifeData: ImageKnifeData) {// 主图未加载成功,并且未加载失败 显示占位图 主图加载成功或者加载失败后=>不展示占位图 if (!this.loadMainReady && !this.loadErrorReady && !this.loadThumbnailReady) { this.placeholderFunc(imageKnifeData) }}// 加载失败 占位图解析成功errorholderOnComplete(imageKnifeData: ImageKnifeData) { // 如果有错误占位图 先解析并保存在RequestOption中 等到加载失败时候进行调用 this.errorholderData = imageKnifeData; if (this.loadErrorReady) { this.errorholderFunc(imageKnifeData) }}