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, 網(wǎng)絡(luò)圖片使用正常的寫法就ok， 也支持base64
2. Android 端顯示weex網(wǎng)絡(luò)圖片
實現(xiàn)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. 實現(xiàn)網(wǎng)頁端和App端相同的寫法房匆，加載圖片
參考: webpack loader
WebStorm
使用自定義loader處理image路徑
在根目錄下新建loaders文件夾
新建 web-h5-image-loader.js
內(nèi)容如下
//這里 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使用不同的處理方式， 達到三端一致的效果
