Weex加载图片-Android篇

Weex加载图片

写在前面

这里只关注Android平台，对ios平台研究的不多，针对不同的平台，可能要做一些微调，示例项目是基于weexpack创建打包的

加载drawable中的图片

对于路径的说明，请参考 官方文档，weex可以加载drawable中的资源图片,image 需要给定height和width 才能显示，ios平台需要将图片放在 bundle resources

<image src="local:///ic_launcher" class="bannar-image"></image>

通过WeexSDK的源码可以看到，对于 local Schemes的图片的加载方式

// com.taobao.weex.ui.component.WXImage
private void setLocalSrc(Uri rewrited) {
  ImageView imageView;
  Drawable localDrawable = ImgURIUtil.getDrawableFromLoaclSrc(getContext(), rewrited);
  if (localDrawable != null && (imageView = getHostView()) != null) {
    imageView.setImageDrawable(localDrawable);
  }
}

//com.taobao.weex.utils.ImgURIUtil

public static Drawable getDrawableFromLoaclSrc(Context context, Uri rewrited) {
  Resources resources = context.getResources();
  List<String> segments = rewrited.getPathSegments();
  if (segments.size() != 1) {
    WXLogUtils.e("Local src format is invalid.");
    return null;
  }
  int id = resources.getIdentifier(segments.get(0), "drawable", context.getPackageName());
  return id == 0 ? null : ResourcesCompat.getDrawable(resources, id, null);
}

加载本地图片

加载本地图片需要开发者自己实现加载方法，在Application的onCreate中初始化，图片加载器

WXSDKEngine.initialize(this,
        new InitConfig.Builder()
            .setImgAdapter(new ImageAdapter())
            .build()
);

public class ImageAdapter implements IWXImgLoaderAdapter {
  @Override
  public void setImage(String url, ImageView view, WXImageQuality quality, WXImageStrategy strategy) {
    //实现你自己的图片下载，否则图片无法显示。
  }
}

在使用weexpack创建的工程中，已经默认实现了加载网络图片,使用的是 Picasso框架加载图片

String temp = url;
if (url.startsWith("//")) {
  temp = "http:" + url;
}

Picasso.with(WXEnvironment.getApplication())
            .load(temp)
            .into(view, new Callback() {
              @Override
              public void onSuccess() {
                if(strategy.getImageListener()!=null){
                  strategy.getImageListener().onImageFinish(url,view,true,null);
                }

                if(!TextUtils.isEmpty(strategy.placeHolder)){
                  ((Picasso) view.getTag(strategy.placeHolder.hashCode())).cancelRequest(view);
                }
              }

              @Override
              public void onError() {
                if(strategy.getImageListener()!=null){
                  strategy.getImageListener().onImageFinish(url,view,false,null);
                }
              }
            });

可以参考上面的方式自己实现加载assets中的图片资源

if(url.startsWith("assets")){
    int index = url.indexOf(":");
    String tempUrl = url.substring(index + 1,url.length());
    temp = "file:///android_asset/dist/static/"+tempUrl;
}

具体的规则可以自己定义

然后在代码中就可以这样写

<image src="assets:01.jpg" class="bannar-image"></image>

具体的请参考 官方文档