阿里Weex Android显示图片

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

参考: Weex 资源路径

<template>
  <div>
    <text>Hello World!</text>
    <image src="local:///logo" style="width: 64px; height: 64px"></image>
    <image src="https://gw.alicdn.com/tfs/TB1yopEdgoQMeJjy1XaXXcSsFXa-640-302.png" style="width: 64px; height: 64px"></image>
  </div>
</template>

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端相同的写法，加载图片

参考: webpack loader

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使用不同的处理方式， 达到三端一致的效果