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>
具体的请参考 官方文档