0
I am consuming the service of a json through Angular 2. And within an ngFor with my let professor of professores
, has a line where I consume this image of type Base64:
<div class="foto-card" style="background: url('{{ professor.imagem }}') center">
On my console generates a Warning and does not render my application:
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…
I put inside my URL:
"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QBaRXhpZgAATU0AKgAAAAgABQMBAAU..."
But it still didn’t work. Asked to use also as follows:
[style.background]="professor.image"
And the same mistake happens.
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
Sorry... I ended up editing in the wrong place. I’m updating my question with your solution...
– Thiago Cunha
I updated the answer
– Arnaldo R. Portela
It does not work inside a split div for CSS. Only by the <img element>...
– Thiago Cunha