Angular <img [src]="someURL"> Как я могу получить доступ к перенаправленному URL-адресу в моем коде?
В приложении Angular у меня есть пользовательский URL-адрес изображения src, например, 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-адресу в своем коде?
Что я уже пробовал:
Я передаю HTMLInputElement в свой TypeScript с помощью <img [src] = "someFunctionReturningURL(t)" #t>.
Внутри someFunctionReturningURL(t) я вызываю setTimeout (чтобы убедиться, что img полностью загрузил URL-адрес src) и проверяю, если 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, а не ссылку, на которую она фактически перенаправляется!
Вы можете сделать ручной запрос к URL-адресу и проверить, куда вы перенаправлены, а затем установить src с окончательным URL-адресом.
Возможный дубликат Можно ли использовать Javascript для обнаружения перенаправленного изображения SRC (в любом популярном браузере)?
Я попробовал ссылку, которую прислал Терри, это хороший хак для моей конкретной ситуации, поскольку при плохом URL-адресе он перенаправлял бы на изображение шириной 1200 вместо 1600, как я просил, поэтому я мог сразу сказать, если это плохо. Но приведенный ниже ответ более универсален и получает фактический URL-адрес перенаправления.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете использовать метод fetch, чтобы получить перенаправленный URL-адрес, а затем установить его в атрибуте src:
fetch("https://source.unsplash.com/1600x900/?facebook")
.then(res => {
if (res.url) {
this.imageSrc = res.url;
console.info(this.imageSrc);
}
});
Перенаправленный запрос изображения не приводит к обновлению атрибута
srcэлемента DOM.