博主打算为自己在vps上挂载的服务, 建立一个导航页, 于是写一个静态页面, 贴了几个超链接
后来, 感觉不美观, 就放了几张图片
服务器存储的图片看了几遍就看腻了, 于是找了一个高质量图片的api, 每次打开导航页都能看到随机的封面
开源图片api的使用
我想获得
300*300, 关于book和library的图片"https://source.unsplash.com/300x300/?book,library将随机图片嵌入到html中
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://source.unsplash.com/300x300/?book,library">
随机封面效果展示
第一次打开:
第二次打开
第三次打开
第N次打开...
随机封面测试地址(页面每次刷新，都能看到不同的封面): http://zhaoolee.com
页面部分源码:
<body> <section class="clearfix"> <div class="item"> <a href="http://git.zhaoolee.com"> <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://source.unsplash.com/300x300/?program" alt=""> <div class="item-title">私有Git仓库</div> </a> </div> <div class="item"> <a href="http://cloud.zhaoolee.com"> <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://source.unsplash.com/300x300/?document" alt=""> <div class="item-title">私有云网盘</div> </a> </div> <div class="item"> <a href="https://www.jianshu.com/u/c5d047065c42"> <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://source.unsplash.com/300x300/?book,library" alt=""> <div class="item-title">简书主页</div> </a> </div> <div class="item"> <a href="https://github.com/zhaoolee"> <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://source.unsplash.com/300x300/?github" alt=""> <div class="item-title">Github主页</div> </a> </div> <div class="item"> <a href=""> <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://source.unsplash.com/300x300/?cartoon" alt=""> <div class="item-title">在线爬虫(建设中)</div> </a> </div> <div class="item"> <a href=""> <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://source.unsplash.com/300x300/?beauty" alt=""> <div class="item-title">资源分享(建设中)</div> </a> </div> </section></body>
小结:
使用随机化开源图片封面, 能让我们每次打开页面都有惊喜.
对于刚刚接触前端的小伙伴, 使用开源的图片库, 能让你的页面更加丰富多彩, 提升学习的兴趣.
对于前端老司机,可以获取定制化的开源图片, 提升页面展示效果.
如果你对图片的质量有极致的追求,https://source.unsplash.com 提供了丰富的接口参数设置,可以定制化随机图片的范围, 当然也可以在unsplash.com 注册一个账号, 订阅特别主题的图片.
作者：木子昭
链接：https://www.jianshu.com/p/526fd7085cfa
共同学习，写下你的评论
评论加载中...
作者其他优质文章
