Ng-src не работает для локального URL-адреса в общей папке

75
7

Я получаю JSON Obj из запроса, и этот Obj имеет URL-адрес изображения следующим образом:


$scope.userObj = {Name: "Jone", img_url: "../photos/profile"}

И я использовал ng-src для отображения его как следующего:


<img ng-src="{{userObj.img_url}}" alt="" align="left">

Но я вижу сломанное изображение. Странно, если я напишу его напрямую, используя ng-src, как:


<img ng-src="../photos/profile" alt="" align="left">

он работает.


Как я могу это исправить? Почему ng-src не работает для локального хранилища от JSON (динамически), но работает для статического URL локального хранилища?

спросил(а) 2021-01-19T14:20:51+03:00 2 месяца, 3 недели назад
1
Решение
62

Без скрипача, с которым я играю, у меня такое чувство, что вы попадаете в службу $sce в angular:


По умолчанию Angular загружает только шаблоны из одного домена и протокол в качестве документа приложения. Это делается путем вызова $sce.getTrustedResourceUrl в URL шаблона. Загрузка шаблонов из другие домены и/или протоколы, вы можете либо перечислить их в белый список, либо обернуть это в доверенное значение.



../фотографии/профиль могут находиться за пределами этого "доверенного домена".


Вы можете "обернуть" параметр url в ответ доверенного домена. Взгляните на этот простой подход - и обратите внимание, что ответ не тот, у кого есть зеленый чек.

Использовать с осторожностью


Как быстрое предупреждение - этот подход может привести к проблемам безопасности, если этот источник URL-адресов, каким-то образом, редактируется пользователем и НЕ проверен вашим внутренним кодом. Вы в основном говорите Angular "расслабляйтесь - это безопасный URL-адрес", поэтому вы хотите убедиться, что это действительно безопасный URL-адрес.


В общем, не используйте этот фильтр доверия на URL-адресе, который предоставляет ваш пользователь, или который извлекается из вашей базы данных/репо, если у вас нет гарантий, чтобы избежать загрузки небезопасный контент для изображений.

ответил(а) 2021-01-19T14:20:51+03:00 2 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема