资讯专栏INFORMATION COLUMN

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

geekzhou / 2520人阅读

摘要:官方群号在讲之前,我们先来看看是如何做图片加载的。提供了来加载图片,更具体的说,有种使用方式。综上,的这种方式用着都很别扭。抛开的限制,我就问你开发中使用图片最舒服的方式是什么。于是乎,调试的时候跑的时候,本机图片可以正常显示了。

WeexBox官方QQ群号:943913583

在讲WeexBox之前,我们先来看看Weex是如何做图片加载的。
Weex提供了来加载图片,更具体的说,有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。使用图片大概是这样的。(点击查看完整例子)



这种使用图片的方式是不是既熟悉又怀念。

重点来了,打开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全部帮你搞定了。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/101988.html

相关文章

  • 【开源】合摩 WeexBox 正式发布

    摘要:目前团队使用已研发了好几款,它能满足及支撑我们上百个页面的业务场景,让我们的开发效率大大提升,使我们的技术栈更加完善。最后希望我们的方案能帮助开发中的你。 showImg(https://segmentfault.com/img/remote/1460000017460300?w=2166&h=2166); WeexBox 一套简洁高效的APP混合开发解决方案 写在开头 WeexBox...

    BakerJ 评论0 收藏0
  • WeexBox 1.2.0 新增 Lottie 动画,妈妈再也不用担心我加班写动画了!

    摘要:官方群号背景官方提供了模块可以用来在组件上执行动画,但是它的功能有限还容易造成卡顿。它通过做成动画导出文件,然后前端使用直接加载文件生成动画,不需要前端进行复杂的绘制等操作。多现成可用的优秀动画在这里中使用因为太简单,我就直接贴代码了。 showImg(https://segmentfault.com/img/bVbntuK?w=300&h=300); WeexBox官方QQ群号:94...

    szysky 评论0 收藏0

发表评论

0条评论

geekzhou

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<