在Weex开发中不可避免的需要导入图片，在此介绍几种通用方法。
Weex图片资源存在形式？
1、每个客户端保存一份图片资源，统一命名。
2、图片资源保存在服务器上，在渲染Weex页面过程中异步下载图片。
3、保存在weex工程中。这样只需要一份保存，多端使用。
如何选择？
首先看公司氛围，如果客户端够统一，那么可以考虑第一种方式。当然，我推荐第2+第3种方式结合使用，对于图片资源小的图片保存在Weex工程中，方便多端统一，但是只限于较小图片资源，因为图片资源将会以base64的形式保存在打包后的bundlejs中，图片资源过大影响下载速度和解析，并且每次下载bundlejs都需要下载对应图片资源。大的图片资源保存在服务器上，需要的时候异步下载，一般都会有cache。
如何实现？
各端保存
在Vue中以file:///的形式添加，当然获取xcasset文件里面的资源需要麻烦点，网上很多介绍，自问度娘。
<image src="file:///filename">
服务器
在Vue中直接加载图片的地址
<image src="https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg">
Weex工程
1、创建weex工程
weex init WeexImageDemo
2、拷贝图片到Weex工程中，Demo放在了./src下面，文件夹命名为resources
3、修改webpack，在loaders中添加image的模块
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url',
query: {
limit: 300000,
name: '[name].[ext]'
}
},
其中loader: 'url'，表示模块命名， limit: 300000,表示图片资源的最大限制。都是可以自己修改。添加后的代码为：
loaders: [
{
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
}, {
test: /\.vue(\?[^?]+)?$/,
loaders: []
},{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url',
query: {
limit: 300000,
name: '[name].[ext]'
}
},
]
4、修改package，在devDependencies中添加"url-loader"，版本号自己设置，修改后如下：
"devDependencies": {
"babel-core": "^6.20.0",
"babel-loader": "^6.2.9",
"babel-preset-es2015": "^6.18.0",
"css-loader": "^0.26.1",
"ip": "^1.1.4",
"serve": "^1.4.0",
"vue-loader": "^10.0.2",
"vue-template-compiler": "^2.1.8",
"webpack": "^1.14.0",
"weex-devtool": "^0.2.64",
"weex-loader": "^0.4.1",
"weex-vue-loader": "^0.2.5",
"url-loader": "^0.5.7"
}
环境配置完成，下一步就是在Weex中使用，为了方便各个页面调用，将调用方式抽取出来，命名为config.js。
5、在config.js定义加载Weex工程图片方法
const SERVER = "YOUR SERVER IP";
module.exports = {
// 加载工程中的image
loadImage(imgName) {
var image = require('./resources/'+imgName);
return image;
},
// 加载服务器上的image
image(imgURL) {
return SERVER + imgURL;
}
}
6、在foo的script导入config.js方法
import image from './config';
7、在foo中使用
<image class="airport-name-image" :src="imageLoader.loadImage('arrows_right@2x.png')"> </image>
<image class="airport-name-image" :src="imageLoader.loadImage('ticket_order_notice@2x.png')"></image>
