【问题标题】:Generate random image by url通过 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 中使这些图像真正随机化?

标签: html image api random request


【解决方案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,您可以这样做:

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

        结果:

        此外,您始终可以使用其 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。

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

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 2013-03-17
            • 2012-02-12
            • 2017-12-20
            • 2013-02-28
            • 2012-08-26
            • 2012-08-11
            • 1970-01-01
            相关资源
            最近更新 更多