Ng-src не работает для локального URL-адреса в общей папке
Я получаю 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 локального хранилища?
Без скрипача, с которым я играю, у меня такое чувство, что вы попадаете в службу $sce в angular:
По умолчанию Angular загружает только шаблоны из одного домена и протокол в качестве документа приложения. Это делается путем вызова $sce.getTrustedResourceUrl в URL шаблона. Загрузка шаблонов из другие домены и/или протоколы, вы можете либо перечислить их в белый список, либо обернуть это в доверенное значение.
../фотографии/профиль могут находиться за пределами этого "доверенного домена".
Вы можете "обернуть" параметр url в ответ доверенного домена. Взгляните на этот простой подход - и обратите внимание, что ответ не тот, у кого есть зеленый чек.
Использовать с осторожностью
Как быстрое предупреждение - этот подход может привести к проблемам безопасности, если этот источник URL-адресов, каким-то образом, редактируется пользователем и НЕ проверен вашим внутренним кодом. Вы в основном говорите Angular "расслабляйтесь - это безопасный URL-адрес", поэтому вы хотите убедиться, что это действительно безопасный URL-адрес.
В общем, не используйте этот фильтр доверия на URL-адресе, который предоставляет ваш пользователь, или который извлекается из вашей базы данных/репо, если у вас нет гарантий, чтобы избежать загрузки небезопасный контент для изображений.
