0

Estou consumindo o serviço de um json através do Angular 2. E dentro de um ngFor com meu let professor of professores, tem uma linha onde eu consumo essa imagem do tipo base64:

<div class="foto-card" style="background: url('{{ professor.imagem }}') center">

No meu console gera um Warning e não renderiza a minha aplicação:

WARNING: sanitizing unsafe style value background: url('/9j/4AAQSkZJRgABAQEAYABgAAD/4QBaRXhpZgAATU0AKgAAAAgABQMBAAUAAAABAAAASgMDAAEAAAABAAAAAFEQAAEAAAABAQAAAFERAAQAAAABAAAOw1ESAAQAAAABAAAOwwAAAAAAAYagAACxj//bAEMACAYGBwYFCAcHBwkJCAoMFA0MCwsMGRITDxQdGh8eHRocHCAkLicgIiwjHBwoNyksMDE0NDQfJzk9ODI8LjM0Mv/bAEMBCQkJDAsMGA0NGDIhHCEyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMv/AABEIASsA6wMBIgACEQEDEQH/xAAfAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgv/xAC1EAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+fr/xAAfAQADAQEBAQEBAQEBAAAAAAAAAQIDBAUGBwgJCgv/xAC1EQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2gAMAwEA…
platform-browser.js:360
WARNING: sanitizing unsafe style value background: url('/9j/4RXDRXhpZgAASUkqAAgAAAAKAA8BAgAOAAAAhgAAABABAgAGAAAApgAAABIBAwABAAAAAQAAABoBBQABAAAA3gAAABsBBQABAAAA5gAAACgBAwABAAAAAgAAADEBAgAoAAAAtgAAADIBAgAUAAAA7gAAABMCAwABAAAAAgAAAGmHBAABAAAAAgEAAHYCAABTb255IEVyaWNzc29uAAAAAAAAAAAAAAAAAAAAAAAAAEs3OTBpAAAAAAAAAAAAAABSMUVHMDAxICAgICBwcmdDWEMxMjUwNDc3X0dFTkVSSUNfRSAwLjAASAAAAAEAAABIAAAAAQAAADIwMDc6MDc6MDcgMTU6Mjg6MDYAFgCaggUAAQAAABACAACdggUAAQAAABgCAAAniAMAAQAAAFAAAAAAkAcABAAAADAyMjADkAIAFAAAACACAAAEkAIAFAAAADQCAAABkQcABAAAAAECAwAEkgoAAQAAAEgCAAAHkgMAAQAAAAIAAAAIkgMAAQAAAAAAAAAJkgMAAQAAABgAAAAAoAcABAAAADAxMDABoAMAAQAAAAEAAAACoAQAAQAAAAAIAAADoAQAAQAAAAAGAAAFoAQAAQAAAFgCAAABpAMAAQAAAAAAAAACpAMAAQAAAAAAAAADpAMAAQAAAAAAAAAEpAUAAQAAAFACAAAGpAMAAQAAAAAAAAAMpAMAAQAAAAIAAAAAAAAAAQAAAB4AAAAcAAAACgAAADIwMDc6MDc6MDcgMTU6Mjg6MDYAMjAwNzowNzowNyAxNToyODowNgAAAAAACgAAAAAAAABkAAAAAgABAAIABAAAAFI5OAACAAcABAAAADAxMDAAAAAABwADAQMAAQAAAAYAAAASAQMAAQAAAAEAAAAaAQUAAQAAANACAAAbAQUAAQAAANgCAAAoAQMAAQAAAAIAAAABAgQA…
platform-browser.js:360
WARNING: sanitizing unsafe style value background: url('iVBORw0KGgoAAAANSUhEUgAAAoMAAAFgCAYAAADAVnM/AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAP+lSURBVHhe7P0HnG1bWtYLvyvXqly14wmdu+kcoAl2QxO0ST8vil5EVOSqF6/pin5+CqifNogkr4oK+jOgAqJwsVHg3iYLTWqBDtB0Tqe7zzl98jk7V9XK3/N/3znWmmvVnFVr1a69zznd66maa845wjvekZ85xphjVgaDwchuG0b6q/k5biv6GZpVRlbReWSD7H5f546Ovl9Xh7qXG5P9aMS5Kr8DG+qygrnMMK1X63IxkCxJwzKFI1SrmMmfhxGoVAg/EHIxq+nwq+xASku/dT+qo7M6K4RKQ+eGooC5gFh5HEkv5HrU5HOiAZDscBi3SyyxxBJLLLHEErcD04RkgurQbjMZBLPBiRjJCNMKJM95Ul9kSkRw2JOSPasOrspc9zIfiiRCGquVjFS5OBFIXTiJQ5YuIIMTsidSJnMnjo4wTwQQOIHTfZVzZuYkFaKZzLC3DfmGANZ0uyGzVelYl1lT9xBdZHmIHgz+xsFiKrMIPX6XWGKJJZZYYoklbimmycg04Dq3nwyWwTWN0/iOETgRvQGjbSKCo66IFyOGPZGqjmwZMRRxFBmsDIMghneRwTTqKPo2lB0ErVKpOuFLJPEoMoiTIaN8+nNy6rpgAxHU2VkdI4YcDdmuyGxNZ+5FDBWWjeouqzpCjwiTwckIwUNxsyWWWGKJJZZYYolbBicjcJEiiN88dcggSKoESRrrDrHSHWRtJGJWqYqcjXSuMGLIdHHfahURxGEiidAtyYA84jMT61Iz0sddxgkdiRgGUWQETwSTkUpHhO2EkWneJM+t6zF6CEkUOawO13Ru+LWN2n6MRApdruIy9MFD…
platform-browser.js:360
WARNING: sanitizing unsafe style value background: url('/9j/4AAQSkZJRgABAQEBLAEsAAD/4RUYRXhpZgAATU0AKgAAAAgACQEPAAIAAAASAAAAegEQAAIAAAAKAAAAjAESAAMAAAABAAEAAAEaAAUAAAABAAAAlgEbAAUAAAABAAAAngEoAAMAAAABAAIAAAExAAIAAAAcAAAApgEyAAIAAAAUAAAAwodpAAQAAAABAAAA1gAAAepOSUtPTiBDT1JQT1JBVElPTgBOSUtPTiBENzAAAC3GwAAAJxAALcbAAAAnEEFkb2JlIFBob3Rvc2hvcCBDUzIgV2luZG93cwAyMDA2OjEwOjExIDIyOjU0OjEyAAAQgpoABQAAAAEAAAGcgp0ABQAAAAEAAAGkiCIAAwAAAAEAAQAAiCcAAwAAAAEAyAAAkAMAAgAAABQAAAGskgEACgAAAAEAAAHAkgIABQAAAAEAAAHIkgQACgAAAAEAAAHQkgUABQAAAAEAAAHYkgcAAwAAAAEABQAAkgkAAwAAAAEAHwAAkgoABQAAAAEAAAHgoAEAAwAAAAH//wAAoAIABAAAAAEAAAvAoAMABAAAAAEAAAfQpAUAAwAAAAEAVwAAAAAAAAAAAAEAAAH0AAAAOAAAAAoyMDA2OjA5OjA4IDAwOjI0OjM2AACIzpgAD0JAAEvZZgAPQkAAAAAAAAAAAQAAAAMAAAABAAAAOgAAAAEAAAAGAQMAAwAAAAEABgAAARoABQAAAAEAAAI4ARsABQAAAAEAAAJAASgAAwAAAAEAAgAAAgEABAAAAAEAAAJIAgIABAAAAAEAABLIAAAAAAAAAEgAAAABAAAASAAAAAH/2P/bAEMACAYGBwYFCAcHBwkJCAoMFA0MCwsMGRITDxQdGh8eHRocHCAkLicgIiwjHBwoNyksMDE0NDQfJzk9ODI8LjM0Mv/bAEMBCQkJDAsMGA0NGDIhHCEyMjIy…
platform-browser.js:360
WARNING: sanitizing unsafe style value background: url('iVBORw0KGgoAAAANSUhEUgAAAoMAAAFgCAYAAADAVnM/AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAP+lSURBVHhe7P0HnG1bWtYLvyvXqly14wmdu+kcoAl2QxO0ST8vil5EVOSqF6/pin5+CqifNogkr4oK+jOgAqJwsVHg3iYLTWqBDtB0Tqe7zzl98jk7V9XK3/N/3znWmmvVnFVr1a69zznd66maa845wjvekZ85xphjVgaDwchuG0b6q/k5biv6GZpVRlbReWSD7H5f546Ovl9Xh7qXG5P9aMS5Kr8DG+qygrnMMK1X63IxkCxJwzKFI1SrmMmfhxGoVAg/EHIxq+nwq+xASku/dT+qo7M6K4RKQ+eGooC5gFh5HEkv5HrU5HOiAZDscBi3SyyxxBJLLLHEErcD04RkgurQbjMZBLPBiRjJCNMKJM95Ul9kSkRw2JOSPasOrspc9zIfiiRCGquVjFS5OBFIXTiJQ5YuIIMTsidSJnMnjo4wTwQQOIHTfZVzZuYkFaKZzLC3DfmGANZ0uyGzVelYl1lT9xBdZHmIHgz+xsFiKrMIPX6XWGKJJZZYYoklbimmycg04Dq3nwyWwTWN0/iOETgRvQGjbSKCo66IFyOGPZGqjmwZMRRxFBmsDIMghneRwTTqKPo2lB0ErVKpOuFLJPEoMoiTIaN8+nNy6rpgAxHU2VkdI4YcDdmuyGxNZ+5FDBWWjeouqzpCjwiTwckIwUNxsyWWWGKJJZZYYolbBicjcJEiiN88dcggSKoESRrrDrHSHWRtJGJWqYqcjXSuMGLIdHHfahURxGEiidAtyYA84jMT61Iz0sddxgkdiRgGUWQETwSTkUpHhO2EkWneJM+t6zF6CEkUOawO13Ru+LWN2n6MRApdruIy9MFD…

Coloquei dentro da minha URL:

"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QBaRXhpZgAATU0AKgAAAAgABQMBAAU..."

Mas mesmo assim não funcionou. Pediram para usar também da seguinte forma:

[style.background]="professor.image"

E o mesmo erro acontece.

Angular is running in the development mode. Call enableProdMode() to enable the production mode.
core.js:3565
WARNING: sanitizing unsafe style value background: url('data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAoMAAAFgCAYAAADAVnM/AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAP+lSURBVHhe7P0HnG1bWtYLvyvXqly14wmdu+kcoAl2QxO0ST8vil5EVOSqF6/pin5+CqifNogkr4oK+jOgAqJwsVHg3iYLTWqBDtB0Tqe7zzl98jk7V9XK3/N/3znWmmvVnFVr1a69zznd66maa845wjvekZ85xphjVgaDwchuG0b6q/k5biv6GZpVRlbReWSD7H5f546Ovl9Xh7qXG5P9aMS5Kr8DG+qygrnMMK1X63IxkCxJwzKFI1SrmMmfhxGoVAg/EHIxq+nwq+xASku/dT+qo7M6K4RKQ+eGooC5gFh5HEkv5HrU5HOiAZDscBi3SyyxxBJLLLHEErcD04RkgurQbjMZBLPBiRjJCNMKJM95Ul9kSkRw2JOSPasOrspc9zIfiiRCGquVjFS5OBFIXTiJQ5YuIIMTsidSJnMnjo4wTwQQOIHTfZVzZuYkFaKZzLC3DfmGANZ0uyGzVelYl1lT9xBdZHmIHgz+xsFiKrMIPX6XWGKJJZZYYoklbimmycg04Dq3nwyWwTWN0/iOETgRvQGjbSKCo66IFyOGPZGqjmwZMRRxFBmsDIMghneRwTTqKPo2lB0ErVKpOuFLJPEoMoiTIaN8+nNy6rpgAxHU2VkdI4YcDdmuyGxNZ+5FDBWWjeouqzpCjwiTwckIwUNxsyWWWGKJJZZYYolbBicjcJEiiN88dcggSKoESRrrDrHSHWRtJGJWqYqcjXSuMGLIdHHfahURxGEiidAtyYA84jMT61Iz0sddxgkdiRgGUWQETwSTkUpHhO2EkWneJM+t6zF6CEkUOawO1…
platform-browser.js:360
WARNING: sanitizing unsafe style value background: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QBaRXhpZgAATU0AKgAAAAgABQMBAAUAAAABAAAASgMDAAEAAAABAAAAAFEQAAEAAAABAQAAAFERAAQAAAABAAAOw1ESAAQAAAABAAAOwwAAAAAAAYagAACxj//bAEMACAYGBwYFCAcHBwkJCAoMFA0MCwsMGRITDxQdGh8eHRocHCAkLicgIiwjHBwoNyksMDE0NDQfJzk9ODI8LjM0Mv/bAEMBCQkJDAsMGA0NGDIhHCEyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMv/AABEIASsA6wMBIgACEQEDEQH/xAAfAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgv/xAC1EAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+fr/xAAfAQADAQEBAQEBAQEBAAAAAAAAAQIDBAUGBwgJCgv/xAC1EQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6…
platform-browser.js:360
WARNING: sanitizing unsafe style value background: url('data:image/jpeg;base64,/9j/4RXDRXhpZgAASUkqAAgAAAAKAA8BAgAOAAAAhgAAABABAgAGAAAApgAAABIBAwABAAAAAQAAABoBBQABAAAA3gAAABsBBQABAAAA5gAAACgBAwABAAAAAgAAADEBAgAoAAAAtgAAADIBAgAUAAAA7gAAABMCAwABAAAAAgAAAGmHBAABAAAAAgEAAHYCAABTb255IEVyaWNzc29uAAAAAAAAAAAAAAAAAAAAAAAAAEs3OTBpAAAAAAAAAAAAAABSMUVHMDAxICAgICBwcmdDWEMxMjUwNDc3X0dFTkVSSUNfRSAwLjAASAAAAAEAAABIAAAAAQAAADIwMDc6MDc6MDcgMTU6Mjg6MDYAFgCaggUAAQAAABACAACdggUAAQAAABgCAAAniAMAAQAAAFAAAAAAkAcABAAAADAyMjADkAIAFAAAACACAAAEkAIAFAAAADQCAAABkQcABAAAAAECAwAEkgoAAQAAAEgCAAAHkgMAAQAAAAIAAAAIkgMAAQAAAAAAAAAJkgMAAQAAABgAAAAAoAcABAAAADAxMDABoAMAAQAAAAEAAAACoAQAAQAAAAAIAAADoAQAAQAAAAAGAAAFoAQAAQAAAFgCAAABpAMAAQAAAAAAAAACpAMAAQAAAAAAAAADpAMAAQAAAAAAAAAEpAUAAQAAAFACAAAGpAMAAQAAAAAAAAAMpAMAAQAAAAIAAAAAAAAAAQAAAB4AAAAcAAAACgAAADIwMDc6MDc6MDcgMTU6Mjg6MDYAMjAwNzowNzowNyAxNToyODowNgAAAAAACgAAAAAAAABkAAAAAgABAAIABAAAAFI5OAACAAcABAAAADAxMDAAAAAABwADAQMAAQAAAAYAAAASAQMAAQAAAAEAAAAaAQUAAQAAANACAAAbAQUAAQAAANgCA…
platform-browser.js:360
WARNING: sanitizing unsafe style value background: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEBLAEsAAD/4RUYRXhpZgAATU0AKgAAAAgACQEPAAIAAAASAAAAegEQAAIAAAAKAAAAjAESAAMAAAABAAEAAAEaAAUAAAABAAAAlgEbAAUAAAABAAAAngEoAAMAAAABAAIAAAExAAIAAAAcAAAApgEyAAIAAAAUAAAAwodpAAQAAAABAAAA1gAAAepOSUtPTiBDT1JQT1JBVElPTgBOSUtPTiBENzAAAC3GwAAAJxAALcbAAAAnEEFkb2JlIFBob3Rvc2hvcCBDUzIgV2luZG93cwAyMDA2OjEwOjExIDIyOjU0OjEyAAAQgpoABQAAAAEAAAGcgp0ABQAAAAEAAAGkiCIAAwAAAAEAAQAAiCcAAwAAAAEAyAAAkAMAAgAAABQAAAGskgEACgAAAAEAAAHAkgIABQAAAAEAAAHIkgQACgAAAAEAAAHQkgUABQAAAAEAAAHYkgcAAwAAAAEABQAAkgkAAwAAAAEAHwAAkgoABQAAAAEAAAHgoAEAAwAAAAH//wAAoAIABAAAAAEAAAvAoAMABAAAAAEAAAfQpAUAAwAAAAEAVwAAAAAAAAAAAAEAAAH0AAAAOAAAAAoyMDA2OjA5OjA4IDAwOjI0OjM2AACIzpgAD0JAAEvZZgAPQkAAAAAAAAAAAQAAAAMAAAABAAAAOgAAAAEAAAAGAQMAAwAAAAEABgAAARoABQAAAAEAAAI4ARsABQAAAAEAAAJAASgAAwAAAAEAAgAAAgEABAAAAAEAAAJIAgIABAAAAAEAABLIAAAAAAAAAEgAAAABAAAASAAAAAH/2P/bAEMACAYGBwYFCAcHBwkJCAoMFA0MCwsMGRITDxQdGh8eHRocHCAkLicgIiwjHBwoNyksMDE0NDQfJzk9ODI8LjM0Mv/bAEMBC…
platform-browser.js:360
WARNING: sanitizing unsafe style value background: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QBaRXhpZgAATU0AKgAAAAgABQMBAAUAAAABAAAASgMDAAEAAAABAAAAAFEQAAEAAAABAQAAAFERAAQAAAABAAAOw1ESAAQAAAABAAAOwwAAAAAAAYagAACxj//bAEMACAYGBwYFCAcHBwkJCAoMFA0MCwsMGRITDxQdGh8eHRocHCAkLicgIiwjHBwoNyksMDE0NDQfJzk9ODI8LjM0Mv/bAEMBCQkJDAsMGA0NGDIhHCEyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMv/AABEIASsA6wMBIgACEQEDEQH/xAAfAAABBQEBAQEBAQAAAAAAAAAAAQIDBAUGBwgJCgv/xAC1EAACAQMDAgQDBQUEBAAAAX0BAgMABBEFEiExQQYTUWEHInEUMoGRoQgjQrHBFVLR8CQzYnKCCQoWFxgZGiUmJygpKjQ1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4eLj5OXm5+jp6vHy8/T19vf4+fr/xAAfAQADAQEBAQEBAQEBAAAAAAAAAQIDBAUGBwgJCgv/xAC1EQACAQIEBAMEBwUEBAABAncAAQIDEQQFITEGEkFRB2FxEyIygQgUQpGhscEJIzNS8BVictEKFiQ04SXxFxgZGiYnKCkqNTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqCg4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7

1 Resposta 1

1

O problema é que a imagem, quando codificada para base64, possui um prefixo antes da sequência de caracteres que servem como metadados no seguinte formato:

"data:mimetype;base64,caracteres" onde:

"data:mimetype" corresponde ao tipo de imagem, ex: "data:image/png", "data:image/jpeg", etc "base64,caracteres" corresponde a string de caracteres que você citou no seu exemplo, mas acrescida do prefixo "base64,"

Com isso, seu exemplo ficaria assim (se fosse uma imagem jpg):

"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QBaRXhpZgAATU0AKgAAAAgABQMBAAU..."

Observe que depois de "base64" colocamos uma vírgula e não dois pontos.

Teste isso usando este site onde você faz o upload de uma imagem e ele te dá a respectiva string já em formato base64.

Dá uma olhada nesta implementação, aqui funciona da forma que eu descrevi, compare com seu código.

3
  • Desculpe... acabei editando no lugar errado. Estou atualizando a minha pergunta com a sua solução... Commented 6/12/2017 às 19:28
  • 1
    Atualizei a resposta Commented 6/12/2017 às 19:58
  • Não funciona dentro de uma div partindo para o CSS. Somente pelo elemento <img>... Commented 7/12/2017 às 12:10

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .