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

发表于 |

起因

博主打算为自己在vps上挂载的服务, 建立一个导航页, 于是写一个静态页面, 贴了几个超链接

后来, 感觉不美观, 就放了几张图片

服务器存储的图片看了几遍就看腻了, 于是找了一个高质量图片的api, 每次打开导航页都能看到随机的封面

开源图片api的使用

  • 我想获得300*300, 关于book和library的图片” 

    1
    https://source.unsplash.com/300x300/?book,library

  • 将随机图片嵌入到html中 

    1
    <img src="https://source.unsplash.com/300x300/?book,library">

随机封面效果展示

  • 第一次打开:

img

  • 第二次打开

img

  • 第三次打开

img

  • 第N次打开…

img

随机封面测试地址(页面每次刷新，都能看到不同的封面)

页面部分源码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<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 注册一个账号, 订阅特别主题的图片

本文转载自: https://cloud.tencent.com/developer/article/1344365?from=15425

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

0%