- The blogger intended to build a navigation page for the service he mounted on vps, so he wrote a static page and posted several hyperlinks
- Later, I felt it was not beautiful, so I put some pictures
- The pictures stored in the server are tired of reading after several times, so I found an api for high-quality pictures, and every time I open the navigation page, I can see a random cover page
The use of open source image api
- I want to get 300 * 300 pictures of book s and libraries“
https://source.unsplash.com/300x300/?book,library - Embed random pictures into html
<img src="https://source.unsplash.com/300x300/?book,library">
Random cover effect display
- First open:
- Second open
- Third open
- Open N times
Random cover test address (each time you open it, you can see a different cover): http://zhaoolee.com
Page part source code:
<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">private Git Warehouse</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">Private cloud disk</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">Homepage of Jane book</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 homepage</div> </a> </div> <div class="item"> <a href=""> <img src="https://source.unsplash.com/300x300/?cartoon" alt=""> <div class="item-title">Online crawler(In construction)</div> </a> </div> <div class="item"> <a href=""> <img src="https://source.unsplash.com/300x300/?beauty" alt=""> <div class="item-title">Resource sharing(In construction)</div> </a> </div> </section> </body>
Summary:
- Using the random open source image cover, we can have a surprise every time we open the page
- For those who just touch the front end, using open source image library can make your page more colorful and enhance your interest in learning
- For the front-end old driver, you can get customized open source pictures to improve the page display effect
- If you have the ultimate pursuit of image quality, https://source.unsplash.com It provides a wealth of interface parameter settings, which can customize the range of random pictures. Of course, it can also be set in the unsplash.com Sign up for an account and subscribe to pictures of special topics