WeexBox 給你最好的圖片加載方式

WeexBox官方QQ羣號:943913583

在講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: 'https://raw.githubusercontent.com/aygtech/weexbox-template/master/deploy',
  },
  test: {
    // 從網絡加載圖片
    imagePublicPath: 'https://raw.githubusercontent.com/aygtech/weexbox-template/master/deploy',
  },
  preRelease: {
    // 從app加載圖片
    imagePublicPath: 'bundle://',
  },
  release: {
    // 從app加載圖片
    imagePublicPath: 'bundle://',
  },
}

module.exports = config

當imagePublicPath爲http時，須要你本身把deploy部署到服務器，圖片地址便是部署的地址。
當imagePublicPath爲bundle://時，weexbox會自動拷貝static到app中。

因而乎，調試的時候跑npm run debug xxx/App.vue的時候，本機圖片能夠正常顯示了。部署的時候，任君挑選是要部署到服務器仍是app中。

因而可知，切換圖片源不用你改動任何一行業務代碼，weexbox所有幫你搞定了。