Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Consigo listar os objetos foto, mas a imagem não é renderizada pelo browser (unsafe)

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?

3 respostas

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); };
solução!

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.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software