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

imagePublicPathhttp时,须要你本身把deploy布置到服务器,图片地点等于布置的地点。
imagePublicPathbundle://时,weexbox会自动拷贝static到app中。

因而乎,调试的时刻跑npm run debug xxx/App.vue的时刻,本机图片能够一般显现了。布置的时刻,任君遴选是要布置到服务器照样app中。

因而可知,切换图片源不必你修改任何一行营业代码,weexbox悉数帮你搞定了。

    原文作者:myeveryheart
    原文地址: https://segmentfault.com/a/1190000018250543
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞