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