共计 1372 个字符，预计需要花费 4 分钟才能阅读完成。
在讲 WeexBox 之前，我们先来看看 Weex 是如何做图片加载的。Weex 提供了 <image> 来加载图片，更具体的说，<image> 有 3 种使用方式。
src=Base64
谁会把 Base64 硬写到源码里？
src=http
那我是不是要先把图片部署到服务器，再把这个图片的地址拷贝来用，麻烦不麻烦？
src= 相对路径
相对路径是相对 bundle URL 的，相对路径将被重写为绝对资源路径 (本地或远程)。
但是我在开发的时候，我更清楚的知道图片相对源码的路径而不是最终 bundle 的路径。
综上，weex 的这 3 种方式用着都很别扭。
抛开 weex 的限制，我就问你开发中使用图片最舒服的方式是什么。答案当然是：卧槽用 file-loader 啊！
如果把 file-loader 集成进 weex 项目，在项目里用 file-loader 的方式引用图片，跑 weex debug 肯定是会报错的，不信的童鞋可以试试。
于是 WeexBox 提供了 @weexbox/debugger 和 @weexbox/builder。它们不但能让你开心的用 file-loader，还提供了一些便利的功能。
假设你已经用 @weexbox/cli 初始化好了项目，并且会使用 file-loader。使用图片大概是这样的。（点击查看完整例子）
<template>
<div>
<image :src=”logo” class=”logo” />
</div>
</template>
<script>
import logo from ‘../../../static/logo.png’
export default {
data() {
return {
logo,
}
},
}
</script>
这种使用图片的方式是不是既熟悉又怀念。
重点来了，打开 config/update-config.json 文件，你能看到形如下面的配置。
const config = {
develop: {
// 从本机加载图片，只有在调试的时候有效
imagePublicPath: null,
},
test: {
// 从网络加载图片
imagePublicPath: ‘https://raw.githubusercontent.com/aygtech/weexbox-template/master/deploy’,
},
preRelease: {
// 从 app 加载图片
imagePublicPath: ‘bundle://’,
},
release: {
// 从网络加载图片
imagePublicPath: ‘https://raw.githubusercontent.com/aygtech/weexbox-template/master/deploy’,
},
}
module.exports = config
当 imagePublicPath 为 null 时，weexbox 会把 static 部署到本机。当 imagePublicPath 为 http 时，需要你自己把 deploy 部署到服务器，图片地址即是部署的地址。当 imagePublicPath 为 bundle:// 时，weexbox 会自动拷贝 static 到 app 中。
于是乎，调试的时候跑 npm run debug xxx/App.vue 的时候，本机图片可以正常显示了。部署的时候，任君挑选是要部署到服务器还是 app 中。
由此可见，切换图片源不用你改动任何一行业务代码，weexbox 全部帮你搞定了。
