专栏首页木子昭的博客img标签随机获取高质量图片

img标签随机获取高质量图片

  • 博主打算为自己在vps上挂载的服务, 建立一个导航页, 于是写一个静态页面, 贴了几个超链接
  • 后来, 感觉不美观, 就放了几张图片
  • 服务器存储的图片看了几遍就看腻了, 于是找了一个高质量图片的api, 每次打开导航页都能看到随机的封面

开源图片api的使用

  • 我想获得300*300, 关于booklibrary的图片" https://source.unsplash.com/300x300/?book,library
  • 将随机图片嵌入到html中 <img src="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 src="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 src="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 src="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 src="https://source.unsplash.com/300x300/?github" alt="">
                <div class="item-title">Github主页</div>
            </a>
        </div>

        <div class="item">
            <a href="">
                <img src="https://source.unsplash.com/300x300/?cartoon" alt="">
                <div class="item-title">在线爬虫(建设中)</div>
            </a>
        </div>


        <div class="item">
            <a href="">
                <img src="https://source.unsplash.com/300x300/?beauty" alt="">
                <div class="item-title">资源分享(建设中)</div>
            </a>
        </div>
    </section>
</body>

小结:

  • 使用随机化开源图片封面, 能让我们每次打开页面都有惊喜.
  • 对于刚刚接触前端的小伙伴, 使用开源的图片库, 能让你的页面更加丰富多彩, 提升学习的兴趣.
  • 对于前端老司机,可以获取定制化的开源图片, 提升页面展示效果.
  • 如果你对图片的质量有极致的追求,https://source.unsplash.com 提供了丰富的接口参数设置,可以定制化随机图片的范围, 当然也可以在unsplash.com 注册一个账号, 订阅特别主题的图片.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 用chrome学编程利用chrome学编程,一切都变得简单...

    利用chrome学编程,一切都变得简单... 用chrome学编程,安装浏览器就可以上手,javascript本身也足够强大,前后端通吃,容易出成果,有了成果...

    zhaoolee
  • 用XPath Helper完成Bing每日壁纸的小爬虫

    为了让搜索变得有趣,谷歌提供了Google doogle, 微软提供了Bing壁纸, 百度直接抄了Google doogle(百度NB!), 作为一名摄影爱好者...

    zhaoolee
  • React组件内事件传参 实现tab切换

    zhaoolee
  • .net core 实现简单爬虫—抓取博客园的博文列表

    晓晨
  • 从青铜到王者10个css3伪类使用技巧和运用

    伪类经常与伪元素混淆,伪元素的效果类似于通过添加一个实际的元素才能达到,而伪类的效果类似于通过添加一个实际的类来达到。实际上css3为了区分两者,已经明确规定了...

    Nealyang
  • MVC5:使用Ajax和HTML5实现文件上传功能

    引言 在实际编程中,经常遇到实现文件上传并显示上传进度的功能,基于此目的,本文就为大家介绍不使用flash 或任何上传文件的插件来实现带有进度显示的文件上传功能...

    葡萄城控件
  • python selenium 微信公众号历史文章随手一点就返回首页?郁闷之下只好将他们都下载下来。

    参照资料:selenium webdriver 如何添加cookie: https://www.cnblogs.com/sundahua/p/10202494....

    forxtz
  • 从零开始学 Web 之 移动Web(九)微金所案例

    相关源代码已放置github:https://github.com/Daotin/Web/blob/master/Code/src/11/wjs.zip

    Daotin
  • LinkedIn 即时通信系统的优化

    前言 LinkedIn 的即时通信系统目前单台机器可以处理数十万的持久连接,这是不断调优的结果。 最近,他们在官网博客中发布了优化过程,介绍了即时通信系统的技术...

    dys
  • MVC和三层,我的一个不成熟的看法,大家批批

      这里说的MVC指的是设计模式里的MVC不是asp.net mvc。   既然MVC是一种设计模式,那么他就应该在任何地方都可以使用。比如三层。   有人说...

    用户1174620

扫码关注云+社区

领取腾讯云代金券