背景

因為 .xcassets 中的圖片資源只能通過 imageNamed: 方法載入，所以需要做一些特殊處理，才能提供給 Weex 使用（PS：純屬娛樂，因為 Weex 跨平臺的特性，這種針對某一端做實現的方案實用價值並不大）。

方案

觀察 WeexSDK 發現有 WXImgLoaderProtocol 這個協議，這個協議包含了下面的方法：

- (id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary
 
 *)options completed:(void(^)(UIImage *image,  NSError *error, BOOL finished))completedBlock;

從名字就可以看出來，這個方法宣告的功能就是通過指定的 URL 下載圖片並返回一個 UIImage 物件。

下載過 WeexDemo 的人應該都知道里面有一個叫 WXImgLoaderDefaultImpl 的類（PS：別告訴我你對 Weex 感興趣確連 WeexDemo 裡面有啥都不知道）。這個類實現了 WXImgLoaderProtocol 協議，內容如下：

- (id<WXImageOperationProtocol>)downloadImageWithURL:(NSString
 
 *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)userInfo completed:(void(^)(UIImage *image,  NSError *error, BOOL finished))completedBlock
{
    if ([url hasPrefix:@"//"]) {
        url = [@"http:" stringByAppendingString:url];
    }

    return (id<WXImageOperationProtocol>)[[SDWebImageManager sharedManager] downloadImageWithURL:[NSURL
 
 URLWithString:url] options:0 progress:^(NSInteger receivedSize, NSInteger expectedSize) {

    } completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) {
        if (completedBlock) {
            completedBlock(image, error, finished);
        }
    }];
}

其實就是利用 SDWebImage 這個庫實現圖片下載功能。而且我還發現，如果不實現 WXImgLoaderProtocol 協議，就無法在 Weex 的程式碼中通過 URL 載入網路圖片。也就是說 Weex 其實是依賴原生來做網路圖片載入，至於為什麼這麼做，我只能說：我不知道。��

然後 WeexDemo 通過下面的程式碼把 WXImgLoaderDefaultImpl 註冊為 Weex 的一個 iOS 原生 handler

[WXSDKEngine registerHandler:[WXImgLoaderDefaultImpl new] withProtocol:@protocol(WXImgLoaderProtocol)];

這樣我們就可以在 Weex 中載入網路圖片了，比如：

<image class="img" style="width: 68px; height: 68px;margin-left:20px;" src="https://gw.alicdn.com/tps/TB1El.mKXXXXXXyapXXXXXXXXXX-34-34.gif"></image>

好了，現在就來說說怎麼載入 .xcassets 中的圖片資源，其實很簡單，在 WXImgLoaderDefaultImpl 實現的方法中新增幾行程式碼就可以：

if ([url hasPrefix:@"xcassets:"]) {
    UIImage *image = [UIImage imageNamed:[url substringFromIndex:9]];
    completedBlock(image, nil, YES);

    return [WXXCassetsLoaderOperation new];
}

這裡我定義的規則是：xcassets:+[.xcassets 中的圖片名]。所以我們判斷 url 是不是以 xcassets: 開頭，如果是，通過 imageNamed 方法載入圖片並返回即可。

因為 downloadImageWithURL 方法要求返回遵循 WXImageOperationProtocol 協議的物件，所以我們新建一個 WXXCassetsLoaderOperation 類，然後實現 WXImageOperationProtocol 協議中的 cancel 方法：

- (void)cancel {
}

然後我們就可以在 Weex 中載入 .xcassets 中的圖片了。程式碼如下：

<image class="img" style="width: 300px; height: 300px;" src="xcassets:reload"></image>