Base 64 ошибка преобразования угловая JS - PullRequest
Новая
       20

Base 64 ошибка преобразования угловая JS

0 голосов
/ 04 июля 2018

Я пытаюсь декодировать изображение base64 из данных JSON и пытаюсь привязать его к DOM, но изображение не отображается.

Пожалуйста, проверьте следующий код: 

.then(function mySuccess(response) {

        $rootScope.vehiclenumber = response.data.vehicleNumber;
        $rootScope.emailDriver = response.data.email;
        imgUrl: "data:image/png;base64," + response.data.image;
        $rootScope.userNamedriver = response.data.Name;
        $rootScope.namedriver = response.data.userName;
        console.log($rootScope.imgUrl);

        $state.go('app.user');

      }
<div>

<img data-ng-src="image/png;base64,{{imgURL}}" />


</div>

Когда я утешил imgURL, он не определен.

Ответы [ 2 ]

0 голосов
/ 04 июля 2018

Вот рабочий код для того же. Я выполнил аналогичную задачу в Angular 5, поэтому выполните следующие шаги: -

1) Создайте функцию, как показано ниже getFileEncode (fileType: string) {

    var encodevalue: string;
    switch (fileType.toUpperCase()) {

        case "PNG": encodevalue = 'data:image/jpeg;base64,'; break;
        case "JPG": encodevalue = 'data:image/png;base64,'; break;
        case "GIF": encodevalue = 'data:image/gif;base64,'; break;

    }
    return encodevalue;
}

2)  Var fileData = this.getFileEncode("PNG") + response.data.image;
//response.data.image should contain a byte array.

3)  Now bind to SRC of img tag as follows
$('#preview').attr('src', fileData).fadeIn('slow');

4) Вы получаете данные в json от веб-сервера, поэтому вам следует позаботиться об этом для получения байтового массива из json, возможно, вам потребуется какое-то преобразование.

0 голосов
/ 04 июля 2018

Попробуйте это:

Я также добавил imgUrl в rootScope. Хотя не проверено и не уверен, что использование rootScope - лучшее место для хранения ваших данных.

Также обратите внимание, что вы использовали imgURL вместо imgUrl в своем шаблоне. 

.then(function mySuccess(response) {
    $rootScope.vehiclenumber = response.data.vehicleNumber;
    $rootScope.emailDriver = response.data.email;
    $rootScope.imgUrl = "data:image/png;base64," + response.data.image;
    $rootScope.userNamedriver = response.data.Name;
    $rootScope.namedriver = response.data.userName;
    console.log($rootScope.imgUrl);

    $state.go('app.user');

  }


<div>
    <img data-ng-src="{{imgUrl}}" />   
</div>
...