How to use base64 image in Angular 2?

Question

How to use base64 image in Angular 2?

Navigation

#1 by (1 votes)

0

I'm consuming the json service through Angular 2. And inside a ngFor with my let professor of professores , there's a line where I use this base64-type image:

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

In my console it 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 placed it inside my URL:

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

But it still did not work. They were also asked to use the following form:

[style.background]="professor.image"

And the same error 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

html5 css front-end angular

asked by anonymous 06.12.2017 / 16:35

1 answer

Questions Popover Bootstrap Problem when doing paging in jQuery and Angular

score 1 · Answer 1

The problem is that the image, when encoded for base64, has a prefix before the string that serves as metadata in the following format:

"date: mimetype; base64, characters" where:

"date: mimetype" corresponds to the image type, eg "data: image / png", "data: image / jpeg", etc. "base64, characters" matches the string of characters you cited in your example, but prefixed with "base64,"

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

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

Note that after "base64" we put a comma, not a colon.

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

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