Question

Hi Unsplash允许通过以下方式从他们的网站加载随机图像：

    $ heroku local
[WARN] No ENV file found
11:01:03 AM web.1 |  Your server is now running...
11:01:03 AM web.1 |  5000
11:01:07 AM web.1 |  GET request received at /
11:01:09 AM web.1 |  <!DOCTYPE html>
11:01:09 AM web.1 |  <html>
11:01:09 AM web.1 |      <head>
11:01:09 AM web.1 |          <meta charset="utf-8"/>
11:01:09 AM web.1 |          <title>Slim 3</title>
11:01:09 AM web.1 |          <link href='//fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>
11:01:09 AM web.1 |          <style>
11:01:09 AM web.1 |              body {
11:01:09 AM web.1 |                  margin: 50px 0 0 0;
11:01:09 AM web.1 |                  padding: 0;
11:01:09 AM web.1 |                  width: 100%;
11:01:09 AM web.1 |                  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
11:01:09 AM web.1 |                  text-align: center;
11:01:09 AM web.1 |                  color: #aaa;
11:01:09 AM web.1 |                  font-size: 18px;
11:01:09 AM web.1 |              }
11:01:09 AM web.1 |              h1 {
11:01:09 AM web.1 |                  color: #719e40;
11:01:09 AM web.1 |                  letter-spacing: -3px;
11:01:09 AM web.1 |                  font-family: 'Lato', sans-serif;
11:01:09 AM web.1 |                  font-size: 100px;
11:01:09 AM web.1 |                  font-weight: 200;
11:01:09 AM web.1 |                  margin-bottom: 0;
11:01:09 AM web.1 |              }
11:01:09 AM web.1 |          </style>
11:01:09 AM web.1 |      </head>
11:01:09 AM web.1 |      <body>
11:01:09 AM web.1 |          <h1>Slim</h1>
11:01:09 AM web.1 |          <div>a microframework for PHP</div>
11:01:09 AM web.1 |                      <p>Try <a href="http://www.slimframework.com">SlimFramework</a>
11:01:09 AM web.1 |              </body>
11:01:09 AM web.1 |  </html>

如果我每次网址生成随机静态图片时都会从浏览器访问网址，例如：

https://source.unsplash.com/random/2560x1440

我想通过第一个url请求jquery或js中的图像，并在响应中获取第二个URL。这可能吗？

Answer 1

您可以使用XMLHttpRequest的responseURL。

MDN Reference

和this answer以获取jQuery和本机JS中的示例。

Answer 2

您可以使用PerformanceObserver获取所请求资源的name属性值

const key = "unsplash";

const url = `https://source.${key}.com/random/2560x1440`;

let bloburl = void 0;

let img = new Image;

const getResourceName = () => {

  let resource = "";

  const observer = new PerformanceObserver((list, obj) => {
    // alternatively iterate all entries, check `"name"`
    // property value for `key`, break loop if specific resource requested
    for (let entry of list.getEntries()) {
      let {name: res} = entry.toJSON();
      resource = res;
    }
  });

  observer.observe({
    entryTypes: ["resource"]
  });

  return fetch(url)
    .then(response => response.blob())
    .then(blob => {
      observer.disconnect();
      bloburl = URL.createObjectURL(blob);
      img.src = bloburl;
      document.body.appendChild(img);
      return resource
    })
    
}

getResourceName().then(res => console.log(res)).catch(err => console.log(err))

您也可以使用Response.url

const key = "unsplash";

const url = `https://source.${key}.com/random/2560x1440`;

let bloburl = void 0;

let img = new Image;

const getResourceName = fetch(url)
    .then(response => Promise.all([response.url, response.blob()]))
    .then(([resource, blob]) => {
      bloburl = URL.createObjectURL(blob);
      img.src = bloburl;
      document.body.appendChild(img);
      return resource
    });
    
getResourceName.then(res => console.log(res)).catch(err => console.log(err))

Answer 3

这很棘手，因为有几件事情正在发生。

如果您使用Chrome或Firefox，请打开开发人员工具并查看网络标签，您会看到原始请求会将HTTP 302重定向返回到其他网址：

然后，浏览器将按照指定的Location标题进行操作，您将看到所显示的页面。该图片位于该页面的<img>内。

因此，要获得最终图像：

对初始网址执行ajax请求
解析响应标头以获取新位置
向新位置执行ajax请求
解析新回复中的HTML，以便从img标记中获取实际图片网址。

Answer 4

fetch('https://source.unsplash.com/random').then(res=>{console.log(res)})

来自source的

为我工作。

重定向后获取实际图像网址

4 个答案: