阿里 weex android,阿里Weex Android显示图片

1. Weex Vue 中图片两种路径写法

Hello World!

image 组件必须指定宽高，要不然不会显示, 如果要加载Android资源图片，使用local:///资源id, 网络图片使用正常的写法就ok， 也支持base64

2. Android 端显示weex网络图片

实现IWXImgLoaderAdapter类

public class WeexImageAdapter implements IWXImgLoaderAdapter {

@Override

public void setImage(String s, ImageView imageView, WXImageQuality wxImageQuality, WXImageStrategy wxImageStrategy) {

//使用图片加载框架，如 glide

}

}

注册 ImageAdapter

在BaseApplication中初始化 weex 的地方

public class BaseApplication extends Application {

@Override

public void onCreate() {

super.onCreate();

InitConfig config = new InitConfig.Builder()

.setImgAdapter(new WeexImageAdapter())

.build();

WXSDKEngine.initialize(this, config);

}

}

3. 实现网页端和App端相同的写法，加载图片

WebStorm

使用自定义loader处理image路径

在根目录下新建loaders文件夹

新建 web-h5-image-loader.js

内容如下

//这里 node 版本不同，写法也不同，有坑

//export default function(source)

module.exports = function (source) {

source = source.replace(/"local:\/\/\/([\S\s]*?)"/g, function (con, $1) {

// 这里暂时写死图片后缀为 .png

return `"/images/${$1}.png"`;

});

return source;

}

替换local:/// 为文件路径, 我这文件存放在/images下

配置 loader

config/webpack.common.conf.js

在webConfig的module下添加代码，引入新建的自定义loader

module: {

rules: [

......, //原有的配置不变

{

test: /\.vue$/,

use: [

{

loader: path.resolve('loaders/web-h5-image-loader.js'),

}

]

}

]

}

这样就可以在web编译过程，把image路径全部都替换web所使用的写法，同一种写法，web和native使用不同的处理方式， 达到三端一致的效果