javascript - Angular 如何访问代码中的重定向 URL？

Question

在 Angular 应用程序中，我将图像 src 设为自定义 URL，例如 https://source.unsplash.com/1600x900/?facebook ，这会被重定向到其服务器上托管的某些图像。

在某些情况下，结果 URL 将重定向到不良图像，例如 https://source.unsplash.com/1600x900/?roblox将重定向到https://images.unsplash.com/source-404?fit=crop&fm=jpg&h=800&q=60&w=1200每当某个术语没有好的结果时(即，在本例中，roblox 是一个不好的术语)。

如何在代码中访问此重定向 URL？

我已经尝试过的:

我通过 <img [src]="someFunctionReturningURL(t)" #t> 将 HTMLInputElement 传递给我的 TypeScript 。里面someFunctionReturningURL(t) ，我调用setTimeout (以确保 img 已完全加载 src URL)并测试 t.src == "https://images.unsplash.com/source-404?fit=crop&fm=jpg&h=800&q=60&w=1200" 是否有效但问题是t.src仍然保留原始的未重定向链接 https://source.unsplash.com/1600x900/?roblox而不是它实际重定向到的链接!

Answer 1

您可以使用 fetch 方法获取重定向的 url，然后在 src 属性上设置它:

fetch("https://source.unsplash.com/1600x900/?facebook")
  .then(res => {
    if (res.url) {
      this.imageSrc = res.url;
      console.log(this.imageSrc);
    }
  });

Example on codesandbox