一般情况下网站图片或文章配图都是固定的,那么有没办法让它每天自动更新或随机显示呢?

要实现这种效果一般得用到API接口,自己做会很麻烦,而且要保证速度的话还得用到CDN加速,这可能也比较费钱。

说明:以下接口都是由缙哥哥博客提供的,感谢大佬分享

随机图片接口

这是一组由吉卜力工作室分享的高清动漫图片,共14部动画作品、700张剧照,接口是由缙哥哥博客制作的。

(侧耳倾听)接口地址:https://api.dujin.org/pic/ghibli/ceqt

(起风了)接口地址:https://api.dujin.org/pic/ghibli/qfl

(借东西的小人阿莉埃蒂)接口地址:https://api.dujin.org/pic/ghibli/alad

(猫的报恩)接口地址:https://api.dujin.org/pic/ghibli/mdbe

(千与千寻)接口地址:https://api.dujin.org/pic/ghibli/qyqx

(记忆中的玛妮)接口地址:https://api.dujin.org/pic/ghibli/jyzdmn

(悬崖上的金鱼姬)接口地址:https://api.dujin.org/pic/ghibli/jyj

(辉夜姬物语)接口地址:https://api.dujin.org/pic/ghibli/hyjwy

(地海战记)接口地址:https://api.dujin.org/pic/ghibli/dhzj

(虞美人盛开的山坡)接口地址:https://api.dujin.org/pic/ghibli/ymr

(哈尔的移动城堡)接口地址:https://api.dujin.org/pic/ghibli/ydcb

(我的邻居山田君)接口地址:https://api.dujin.org/pic/ghibli/stj

(幽灵公主)接口地址:https://api.dujin.org/pic/ghibli/ylgz

使用方法

1
<img src="https://api.dujin.org/pic/ghibli/alad" alt="随机图片" />

必应每日更新图片


必应搜索主页有一个每日更新的图片,这上面的图片都挺漂亮的,这里给大家分享的必应每日图片接口也是缙哥哥博客提供的,直接分享图片插入代码,下面三个选一个就可以了,使用方法跟上面一样,这个图片是每天自动更新的。

1
2
3
<img src="https://api.dujin.org/bing/1366.php" alt="1399像素Bing每日图片" />
<img src="https://api.dujin.org/bing/1920.php" alt="1920像素Bing每日图片超高清" />
<img src="https://api.dujin.org/bing/m.php" alt="1080*1920每日图片手机超高清" />

unspalsh

unspalsh非常慷慨的提供了一个免费且无需TOKEN的API:https://source.unsplash.com/random

可以把它插入到息流的图片链接中,比如下面这样:

这张图是来自unsplash的随机图片 这张图是来自unsplash的随机图片

这样做可以随机得到一张图片,如果我们想要某一个主题的图片我们可以在后面加上一些主题词,例如城市和夜晚,注意必须是英文才可以

https://source.unsplash.com/random/?city,night

https://source.unsplash.com/random/?city,night

城市夜景就这样出来了,同样的我们可以换很多词

有一些图会很大,所以可以给他规定加载以后的大小,它可以帮助我们限制图片大小提高超大高清图的加载速度,以及在作为封面使用时的尺寸限制。

https://source.unsplash.com/random/1500x800/?water,fish

https://source.unsplash.com/random/1500x800/?water,fish https://source.unsplash.com/random/1500x800/?water,fish

关键词可以是一个,也可以是两个

https://source.unsplash.com/random/900×700/?fruit

https://source.unsplash.com/random/500x0/?water,fish

当我们设置高度为零时,可以让图片在固定的宽度下保持原来的比例

https://source.unsplash.com/random/500x0/?water,fish https://source.unsplash.com/random/500x0/?water,fish

一直到这里,图片依然是随机显示的,如何让它显示我们自己想要的图呢?

使用你之前注册的用户名就可以了,或者用别人的也行,例如这位摄影师的图集,由于加了他的用户名,下面这张图都从他上传的个人图库中显示,换成你自己的用户名就会变成你自己的图,当然前提是你得先去自己的账号上传照片。比如这个用户叫做raaminka

https://source.unsplash.com/user/raaminka

https://source.unsplash.com/user/raaminka

如果你和我一样懒得传图,那么你可以用你的加心图集,就是那个爱心点一下就行了。

https://source.unsplash.com/user/raaminka/likes

https://source.unsplash.com/user/raaminka/likes

https://source.unsplash.com/collection/collectionID/1600x900

这是一个图集作为来源,需要填入图集的ID,这个ID需要自己找到然后填进去,这个图集可以是你自己收集和建立的

https://source.unsplash.com/random/1500x800/weekly

加入daily或者weekly,它会周期性的换图

https://source.unsplash.com/800x0/daily?flower

这个意思是每天来一张鲜花的图

https://source.unsplash.com/800x0/daily?flower

https://source.unsplash.com/random/1500x800/weekly?searchterm1,searchterm2

也可以配合关键字一起

https://source.unsplash.com/collection/collectionID/1600x900?blur

https://source.unsplash.com/collection/collectionID/1600x900?blur

或者 引用你自己的图片集合

我们可以在网址看到合集的地址,比如

https://unsplash.com/@lostdonut/collections

@lostdonut/collections,去掉那个@就是用户名了。

https://source.unsplash.com/collection/3131339/1600x900

https://source.unsplash.com/collection/3131339/1600x900

比如我看上了一个图集:https://unsplash.com/collections/G-oBWoPXp7c/nasa

collections/G-oBWoPXp7c/,这个就是ID

https://source.unsplash.com/collection/G-oBWoPXp7c/1600x900,所以整理链接为这个,贴进图片如下:

https://source.unsplash.com/collection/G-oBWoPXp7c/1600x900

https://source.unsplash.com/user/lostdonut/likes

https://source.unsplash.com/random/?NASA

Check out this @unsplash collection curated by Alana Helbig

https://unsplash.com/collections/sTMlT4ZJrxc/hannah-rose

https://source.unsplash.com/collection/sTMlT4ZJrxc/1600x900

这是另外一个网址,也是随机的

高级选项 - Picsum

通过将 ?grayscale 添加到 URL 字符串,将随机图像变为灰度: https://picsum.photos/1500/800?grayscale

通过将 ?blur 添加到 URL 字符串的末尾来模糊随机图像: https://picsum.photos/1500/800?blur

通过提供 1 到 10 之间的数字来更改模糊级别(数字越大,模糊效果越大): https://picsum.photos/1500/800?blur=2

将灰度和模糊结合在一起: https://picsum.photos/1500/800?grayscale&blur=2

以上都可以作为封面题图用,也可以作为画廊自动封面用

参考

Lorem Picsum

Random Cover Image on Page Refresh - Notion Things

https://shkspr.mobi/svg/calendar.svg