javascript - Get actual image url after redirect - Stack Overflow

admin管理员组

文章数量:1315326

Hi Unsplash allows to load random image from their website via:

if I access the url from the browser each time the url generates random static image eg:

.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=2560&h=1440&fit=crop&s=a7f66c8417bcf79d2503b84db64c7b1a

I would like to request the image in jquery or js via the first url and in response get the second one. Is this possible?

Hi Unsplash allows to load random image from their website via:

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

if I access the url from the browser each time the url generates random static image eg:

https://images.unsplash./photo-1488616268114-d949a6d72edf?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=2560&h=1440&fit=crop&s=a7f66c8417bcf79d2503b84db64c7b1a

I would like to request the image in jquery or js via the first url and in response get the second one. Is this possible?

• javascript
• jquery
• ajax

Share Improve this question Follow asked May 14, 2017 at 5:48 BenBen 34522 gold badges44 silver badges1616 bronze badges 1

• I'm having similar problem with laravel. Please help me. stackoverflow./questions/59167996/…? – Mael Commented Dec 4, 2019 at 6:47

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

You can use the responseURL of the XMLHttpRequest.

MDN Reference

and this answer for an example in jQuery and native JS.

This is tricky since there are several things going on.

If you use Chrome or Firefox, open the developer tools and review the network tab you will see that the original request returns an HTTP 302 redirect to a different URL:

The browser then follows the specified Location header and you get the page that you see. The image is within an <img> on that page.

So to get the final image you need to:

1. Do an ajax request to the initial URL
2. Parse the response headers to get the new location
3. Do an ajax request to the new location
4. Parse the HTML in the new response to grab the actual image URL out of the img tag.

Good luck!

You can use PerformanceObserver to get the name property value of the requested resource

const key = "unsplash";

const url = `https://source.${key}./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))

You can alternatively use Response.url

const key = "unsplash";

const url = `https://source.${key}./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))

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

from source worked for me.

本文标签： javascriptGet actual image url after redirectStack Overflow