How to use Base64 image in Angular 2?

Question

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

Answer 1

The problem is that the image, when encoded for Base64, has a prefix before the string of characters that serve as metadata in the following format:

"date:mimetype;Base64,characters" where:

"data:mimetype" corresponds to the image type, e.g.: "data:image/png", "data:image/jpeg", etc "Base64,characters" corresponds to the string of characters you cited in your example, but with the prefix "Base64,"

With this, your example would look like this (if it were a jpg image):

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

Note that after "Base64" we put a comma and not two points.

Test this using this website where you upload an image and it gives you the respective string already in Base64 format.

Take a look in this implementation, here works the way I described, compare with your code.