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

作者 : 开心源码 本文共1517个字,预计阅读时间需要4分钟 发布时间: 2022-05-12 共172人阅读
  • 博主打算为自己在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.songma.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=" 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 注册一个账号, 订阅特别主题的图片.

上一篇 目录 已是最后

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » img标签随机获取高质量图片

发表回复