我无法弄清楚为什么ion-image
不显示Plugins.Camera.getPhoto()
的base64图像,但是img
可以渲染图像:
我的html
<img *ngIf="selectedImage" [src]="selectedImage">
<ion-img
role="button"
class="image"
(click)="onPickImage()"
[src]="selectedImage"
*ngIf="selectedImage"
></ion-img>
我的.ts
Plugins.Camera.getPhoto({
quality: 50,
source: CameraSource.Prompt,
correctOrientation: true,
height: 320,
width: 200,
resultType: CameraResultType.DataUrl
})
.then(image => {
this.selectedImage = this.sanitizer.bypassSecurityTrustResourceUrl(
image && image.dataUrl
);
this.imagePick.emit(this.selectedImage);
})
.catch(error => {
console.log(error);
});
所以我看到的是:
您可以看到ion-img
没有渲染图像
编辑
这是我在selectedImage
中获得的值:
数据:图像/ JPEG; BASE64,/ 9J / 4AAQSkZJRgABAQAAAQABAAD / 2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkz \ nODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P / 2wBDARESEhgVGC8aGi9jQjhCY2NjY2Nj \ nY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P / wAARCAFAAMgDASIA \ nAhEBAxEB / 8QAGgAAAgMBAQAAAAAAAAAAAAAAAQIAAwQFBv / EAD8QAAEDAgMGAwUECQUAAwAAAAEA \ nAhEDBBIhMQUTIkFRYTJxgRQjkbHBM0Kh0RUkJVJTcoKS8DRiorLhY3Tx / 8QAGQEBAQEBAQEAAAAA \ nAAAAAAAAAAECAwQF / 8QAHREBAQEBAQADAQEAAAAAAAAAAAECETEDBEESIf / aAAwDAQACEQMRAD8A \ n448kfRAJlxdg9FJ7KIqAT2KhPYooFAhPZKT2TlIVRWfJKU7khVQqkoFRUGUZSoogkpdSFFB4gg1D \ nNRAaDyRUVEHCQUykIKC8 + SVrsWaSocII5pqYgAKouYtDRBafRUM5LU0Q0KKIURbqogobmiqaNTFk \ nZlXz5qKiIQlQFQFAo + iEhAhSFWH1VZKoRyrKscQqyqhSgiSlVQyiCMoIUG + JQqM8SDW3QIqDRFRQ \ nURCiDFX + 2jqnapciKzT1CjMyqi9g0C1KikJe1X81FEaKIgaBRBioDiJ6BXquiOAnqVYFFRFBEKA5 \ noGUVEUhlVuVrlW5Ecy8kVyS8gHQJ62z7qhSNWqCGDU4gfkVdUsql7cBlNzQWtni01Witd069sNmD \ nEK4w08TvDiBHPXl0XWeOd9c62ta13i3EvwxOcRPmq907f7jEd5iwR3mF1Lb9h4vauPfRh3WcRrMx \ n1VYtXVq / 6Tplotw / elp8UA55acjzV4jLcWVxas D68taTAOIHP0Ro7Puq9IVaQLmO0OID6rfcXDds \ nsFvbAse04yamQgZcp6pqN / S2ZSFnXa91SnqWAEZ58yOqo49NhqvwseSYJ + AkrXRnhnWAm9gqbOO + \ nrua4ODmNDCSZIOs8lVaYhULCZjMFZqxvCKLBMo4O6w2VFEM7o4e6DPXp48MZEJWsc12YWh4iB3Rw \ nd06cSiOJx6BWgSla3C0kdQrAEBkCXHIASoqLx + C3gHN5jXkorIloMGFgHZFFBZaHNGCgEVFTNDNF \ nRApJSOVhCRwRC0Lina3IfWOFhaQTExosvstR197dTGK13u9NSYyBk5a5ZqXzC + kA1pc4mABqVvsn \ nUqeym21zUbRe5rgW1DhMEnOCuufHPXrNtNzdqOpMsjvXMDi4eGBl1hW0a1Ohs47PqOw3Ra5gpxOb \ npjPTmFm2Mx1pdufctdRYWEB1QYQTIykqXLH1NtC4Y0uoB7DvQJbAiTOmULTJtnUX7MrurXrd1Tc3 \ nADOLOQeU9Cq721qXl0 + 7pCbZ0HeSBkBBMHPkVs2y9t3aNp2zhWeHgltM4iBBzyUtnsp7FNu9wbXL \ nHjdEw6TMCNc5CAbRvLe8tw23fjNN2NwgiBBE59yFit / 9U7yCW1oOo0q7q7XU3ODWsa8QXcQJidYh \ nPbD9af5BZrWW9nhTINENCK5uiKKKIM9xWFJ4ESeiNOo54E5eSy3JxXJ7ZLXat0VRrDfdEc4UGYEc \ n07RklbDRJyDZ / BBz7983AYDk0ad / 8hRZqji + oXnUmVFuMulCiPJBcm0kd0ZHf4IBMihI7 / BT / NEV \ nECn1 + CV3 + ZKwpSERTLW1KbnGA17TJyAzVG2WOu7tj7ZprMDAC6mMQBk5SFbcNmk4dpTbFebSlVp3 \ nXuASHN3nDJ5xPkF0w56Ptl7Lq0ZTtnNrPDwS2mcRAg5wEbZ7KexTb1HtZWNN43bzDpMxl6rJYMfa \ n7UdUwuZbEuG8cIbh5Z6dFNqUU 3V79ta0aawgS6mMQxDlI9FtlNjMdaXbn3LTRYWEB1QYQTIyzUuWP \ nqbaFwxrnUA9h3oEtgRJnTKFq2y9t3aNZbEVnB4JFPiIEHopSqNp7ENuxwdXLHN3QPFJJnLXKUA2q \ N + nXfRdSe2oGTJaZgkjp5H4LJbD9ZqHsPqltqJo2zhUllV9QcDhBgA5x0zVlsJq1Y6D6rNby3AQ0D \ nooEUQubYIHIFNCquHYKDzMZZIOc3jql3UyupbNhq51u2XLrUWw1aqRaFmu34KDomXGFpOQlc6 / DN \ nRrR90KQrG5RQqLbDp8lESpzXJ1DRFQooBKKiICAQlKsSuQZ6oxMcOohU3v7Sp29O2fvK1JpxtOUa \ nSZPdanBZbOmdml17V4qTwWQzNwM8 + 2S3hz223FN1TY4tmxvAxje0iJ + Sp2dWpbNtzRu6gY9zy4AA \ nnKAOXktax32zql65jqTmAtEHET6clw + L5ta1yvnfD9je9zNVbOY7Zb3vvhumvENPik + koUaNShtE \ n7QqNw2pc54qTydMGNeYVlzUG22inagsNM4jvMvlKL7hlzbfopgIrgBmI + GW6568jyXre4t5Vp3Ny \ n2vRdip4QzFEZiSdfMKu0 + 2qR /吨+ qDaLrUezVCHPaS8lukEN / JPZMio937xAHoFjTeW1FQBGMlhsO \ nSy3rophvUrUVhvDNYDkAkKloySF1GCGrFZs0XQAyVqEeYC5NZ2NzndTK6F4 / DSdyJ4QueRwqxKrc \ nNFFHKLTLpFQIlQLk6ooiognopPZFRAJ7FQ + SaEIQVnyWbfm5 / ZhZgxkneTMZl2np1WyFTuWBlzcs \ n4bmkCWu6DD006rWPWN + LqtanRuG0KjoqPjCIOcmAkvL52zsGKjj3k / eiI9O6psWHaFs + 5rcd1TcW \ n036YYAIyGWpSbN / au89u97uowfdiZnSOgWc / BnOv6jx4 + L4n U9p6ckNnPdtR72Xx3rWCWjwwfSE1qTd31ayrnHbUcWBmkQYGYz0Xd6CF / tDvaYw71u \ nLDM4fu6 / 0 / irLEyw5aH6BZrt + 4uqlvbgbtvC0HllJz8yVssmjchwEE6 / 56Lnp0y0acipPYoqLDZZ \ n7Fc6ocddx7rpVCGscToAufRBdUkrUSt9qyGhalXRbDVYVBz74zUDZyA / FZhmFdX4nF3dUsylbjJH \ nZGFEXjMqKo6JUGqJQAhcnRFDoioUEHmp6qKQgPxUjuVJRlQKR5rHXt6tXaVB9NmIUi1zswIE / WDI \ n2rHfXT7KpTrUmtLnAtOIGIyK1n1nXiraNP8ASldtSx97gbhf92MzGsd0 + 0v2ru / Yfe7qcf3YmI1j \ noVLn9h4fZePfTi3mcRpER1RuQdiNabXjFbJxqZxGkRHUrs5JtEnaraYsTvRTkvHhidNY6FC6 / W7G \ njZW / HcUYxs0iBBzOWqlwf0IGG149 / wCI1M9NIiOqlU + wUWbQpZ17iMTX + EYuIwNdUDCix1viI46T \ nQw9iAAR8ZV9tTNOnB / zn9UlEY7R7udR2M + bmgn8Sr2aHzXKuuTKIwostKLt0UDB1yVFqyXBW3uYa \ nE1mzRaiNjBASXDsNJ3U5K6ICy3JkETpkkSszswVmOT46rZUbhIA5hZKninotIBCiMqIjo8kOSaNE \ nCFzdEChGaiJGaBYRUIkZoYR0CAogIADojA6KCQqbisy1dSuHhxDSQQ3XMf8A4r4HQKm8ZRNEGu2a \ nbXAu10mOXmrPUvjJbtGzXuvn529cQxrc3CcxM9h1Ut2jZtQ3z87esIY1ubhOYnloEBWoPqOZdVmP \ nsGj3QBzB5ZDiyEjNBlak + o5l5UY6xb9i0OBI / dybxaTqu7ie2qs2Xir1pcy6h1PAJIGuc + YRpEbH \ nqVH3QxGuZbu84jWZjqEjKlo9zm3z2uoMMW4BkhvfDnpGqFKtSrT + l6jHx9lhcDHXwemqDfRpll毫米