WeexBox 给你最好的图片加载方式

阳光穿透心脏的1/2处 2022-03-07 08:48 121阅读 0赞

`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。使用图片大概是这样的。（[点击查看完整例子][Link 1]）

<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全部帮你搞定了。

[Link 1]: https://github.com/aygtech/weexbox-template/blob/master/src/page/page1/App.vue