偶然发现Github Students Pack里面有免费的Me域名,
于是便注册了一个fubuki.me,
因为有了域名,于是便绑了一个Github Pages,
因为缺少内容,于是翻出来硬盘里的MoeLoader,下了一堆狐狸图,
因为有了一堆图,于是就想写个出图的接口。
程序员的生活,就是这样的枯燥,而又充满惊喜。
用自己的服务器是不可能的,这辈子是不可能的,流量也买不起,只有薅下CloudFlare之类的才能维持生活的样子

由于静态空间的特殊性,文件系统的API基本全军覆没
常规的思路是把图片全列出来然后到一个Array里面,利用Math.rand()去调用这个Array。
可是如果我懒得这样每次手动操作又该怎么办呢。
被webpack的loader误导了快一天,然后发现还有其他的方法。
利用WebPack的require.context即可实现把一整个目录都打包出来

require.context('./images', false, /\.(png|jpe?g|svg)$/)
参数分别是 路径 是否继续匹配子目录 一个正则表达式匹配文件名

问题来了,打包以后文件名该这么找呢,于是继续搜索,终于在Stackoverflow发现一个魔法操作

function importAll(r) {
  return r.keys().map(r);
}
const images = importAll(
  require.context('./images', false, /\.(png|jpe?g|svg)$/)
);

于是便获得了文件名键值,接下来简单的把获取到的文件名动态绑定到Vue元素上即可,
效果 fubuki.me

标签: none

发表新评论