通过 url 生成随机图片

Posted 2023-02-19

【中文标题】通过 url 生成随机图片

【英文标题】：Generate random image by url

【发布时间】：2020-07-02 23:04:57

【问题描述】：

我有一个带有端点的 API：

api/image/1把图片还给我1 api/image/random给我一张随机图片

每当我调用随机图片时，例如在 1 个网页上 5 次，每次都是相同的图片。有点像https://picsum.photos/seed/picsum/200/300...

我想要一个随机的图像，每次。即使我在 1 个网页上调用 10 次随机图像。有没有办法做到这一点？

【问题讨论】：

能否分享您的代码，以便我们查看对 API 的调用和 API 代码/文档？

用一个例子来编辑这个问题：jsfiddle.net/k7a4vctL 前 2 个图像总是相同的：是否也可以在我的 API 中使这些图像真正随机化？

dilbert.com/strip/2001-10-25

【参考方案1】：

这里是最流行和最稳定的 API， 简单易用，每次都会将您重定向到随机图像。

网址

https://source.unsplash.com/random/300x200

语法

https://source.unsplash.com/random/<width>x<height>

这是 JS 技巧，可以在每个请求上获取唯一图像

https://source.unsplash.com/random/300x200?sig=$Math.random()

【参考方案2】：

您需要随机化您网址中的数字； 网址 => https://picsum.photos/200/300?random=1

<img id = 'imgShow' />

document.getElementById('imgShow').src = 'https://picsum.photos/'+(200+rand())+'/' + (300 + rand()) +'?random=1';

function rand() return Math.floor(Math.random() * 90) ;

【参考方案3】：

正如这个githubissue所说，你基本上可以使用https://source.unsplash.com/random/200x200?sig=incrementingIdentifier。

<img src="https://source.unsplash.com/random/200x200?sig=1" />
<img src="https://source.unsplash.com/random/200x200?sig=2" />
<img src="https://source.unsplash.com/random/200x200?sig=3" />

【参考方案4】：

他们实际上在他们的文档中解决了这个常见问题。有趣的是，您正在使用他们的建议来实现完全相反的效果：

静态随机图像 通过在 URL 的开头添加 /seed/seed，每次基于种子获取相同的随机图像。

https://picsum.photos/seed/picsum/200/300

解决方案

根据 Picsum，您可以这样做：

要在浏览器中请求多个相同大小的图像，请添加随机查询参数以防止图像被缓存： <img src="https://picsum.photos/200/300?random=1"><img src="https://picsum.photos/200/300?random=2">

结果：

此外，您始终可以使用其 API 获取 URL 列表，它允许您定义图像的数量和更多的东西。我建议实际阅读他们提出的小指南on their site

【参考方案5】：

这是由浏览器缓存引起的，因为您正在有效地请求相同的图像，这可以在我的浏览器的截屏中看到，

两行代码，

<img src="https://picsum.photos/200/300">
<img src="https://picsum.photos/200/300">

一个服务器请求，

根据您使用的语言，您需要在 url 中添加一些随机元素，

<img src="https://picsum.photos/200/300?nocache=<?php echo microtime(); ?>" >
<img src="https://picsum.photos/200/300?nocache=<?php echo microtime(); ?>">

我在 PHP 中添加了 microtime()，microtime 的使用意义重大，因为如果服务器和客户端速度很快，使用 time() 不会总是提供不同的请求 url。

我现在收到两个请求和两个图像，