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"，但问题是{{1 }}仍保留原始的未重定向链接t.src，而不是它实际重定向到的链接！

Answer 1

您可以使用fetch方法获取重定向的网址，然后将其设置为src属性：

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

Example on codesandbox

角度<img [src]="someURL"/>如何在代码中访问重定向的URL？

1 个答案: