Solucionado
Tentei reproduzir o exemplo dado, mas o resultado foi:
<img
class="img-responsive center-block"
ng-reflect-src="unsafe:data:image/jpeg;base64,/9j/4A..."
src="unsafe:data:image/jpeg;base64,/9j/4A..."
ng-reflect-alt="Futebol"
alt="Futebol">
...Os navegadores (Chrome, Firefox e Edge) exibem apenas o alt da imagem seguido no console de um warning:
WARNING: sanitizing unsafe URL value
Alguém poderia me explicar melhor porque isto ocorre e como corrigir?
hoje, com a Alura e o Google Gemini
Fala thiago, tudo bom? Quando você recebe os dados da API, o foto.url tem esse "unsafe"?
Olá Mário, não tem não.
A requisição para http://localhost:3000/v1/fotos retorna os dados sem isto. Veja o início do JSON retornado abaixo.
[{"url":"data:image/jpeg;base64,/9j/4AAQSkZJRgA...De acordo com o Chrome, o warning ocorre em platform-browser.umd.js:948 que contém:
BrowserDomAdapter.prototype.log = function (error /** TODO #9100 */) { window.console.log(error); };Problema resolvido. Depois de reutilizar o componente foto na tela de cadastro e as imagens serem exibidas normalmente, percebi que o erro em listagem era por ter esquecido uma chave a mais - }}} - na url.
<foto url="{{foto.url}}}" ... ></foto>Falha minha.