How to recover an angled Base64 image on the server

Question

I have an application where the user chooses an image and saves as

Base64 in the bank. The problem is when I return the image it is not loaded correctly.

Controller:

angular.module("modaFeminina").controller("ProdutoController", function ($scope, $http, $base64) {

$scope.produto = {};

$scope.submeter = function () {

    $scope.produto.Imagem = $base64.encode($scope.produto.Imagem);

    $http.post("/Produto/Salvar", $scope.produto).success(function () {

    }).error(function () {

    });
}
    $scope.Listar = function() {
        $http.get("/Produto/ListarPorId/1", $scope.produto.Id).success(function (produto) {
            $scope.produto = produto;
            $scope.produto.Imagem = $base64.decode(produto.Imagem);
        }).error(function () {

        });
    }

});

View

<div class="row">
    <div class="col s12 ">
        <h4>Cadastrar Produto</h4>
    </div>
    <form class="" name="formulario">
        <div class="col s8">
            <div class="row">
                <div class="input-field col s6 m6 l6">
                    <i class="material-icons prefix">local_offer</i>
                    <input id="inputProduto" type="text" class="validate" name="Produto" ng-model="produto.NomeProduto">
                    <label for="inputProduto">Produto</label>
                </div>
                <div class="input-field col s6 m6 l6">
                    <i class="material-icons prefix">store</i>
                    <input id="inputLoja" type="text" class="validate" name="Loja" ng-model="produto.Loja">
                    <label for="inputLoja">Loja</label>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s12 m12 l12">
                    <i class="material-icons prefix">local_offer</i>
                    <textarea id="textareaDescricao" class="materialize-textarea" ng-model="produto.Descricao"></textarea>
                    <label for="textareaDescricao">Descrição</label>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s6 m6 l6">
                    <i class="material-icons prefix">local_offer</i>
                    <input id="inputMarca" type="text" class="validate" name="Marca" ng-model="produto.Marca">
                    <label for="inputMarca">Marca</label>
                </div>
                <div class="input-field col s6 m6 l6">
                    <i class="material-icons prefix">loyalty</i>
                    <input id="inputTipo" type="text" class="validate" name="Tipo" ng-model="produto.Tipo">
                    <label for="inputTipo">Tipo</label>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s4 m4 l4">
                    <i class="material-icons prefix">local_offer</i>
                    <input id="inputQuantidade" type="number" class="validate" name="Quantidade" ng-model="produto.Quantidade">
                    <label for="inputQuantidade">Quantidade</label>
                </div>
                <div class="input-field col s4 m4 l4">
                    <i class="material-icons prefix">monetization_on</i>
                    <input id="inputValorPago" type="text" class="validate" name="ValorPago" ng-model="produto.ValorPago">
                    <label for="inputValorPago">Valor Pago</label>
                </div>
                <div class="input-field col s4 m4 l4">
                    <i class="material-icons prefix">monetization_on</i>
                    <input id="inputValorUnitario" type="text" class="validate" name="ValorUnitario" ng-model="produto.ValorUnitario">
                    <label for="inputValorUnitario">Valor Unitário</label>
                </div>
            </div>
            <div class="row">
                <div class="file-field input-field">
                    <div class="btn">
                        <span>File</span>
                        <input type="file">
                    </div>
                    <div class="file-path-wrapper">
                        <input class="file-path validate" type="text" ng-model="produto.Imagem">
                    </div>
                </div>
            </div>
        </div>
        <div class="col s4">
            <div class="card small">
                <div class="card-image waves-effect waves-block waves-light">
                    <img class="activator" data-ng-src="{{produto.Imagem}}">
                </div>
                <div class="card-content">
                    <span class="card-title activator grey-text text-darken-4">{{produto.NomeProduto}}<i class="material-icons right">more_vert</i></span>
                </div>
                <div class="card-reveal">
                    <span class="card-title grey-text text-darken-4">{{produto.NomeProduto}}<i class="material-icons right">close</i></span>
                    <p>{{produto.Descricao}}</p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col s6 m6 l6">
                <button class="btn waves-effect waves-light" type="submit" ng-click="submeter()" onclick="Materialize.toast('Produto salvo com sucesso!', 4000)" name="action">
                    Salvar
                    <i class="material-icons right">send</i>
                </button>
                <a href="#" class="btn waves-effect waves-light" ng-click="Listar()">
                    Voltar
                    <i class="material-icons right">undo</i>
                </a>
            </div>
        </div>
    </form>
</div>

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.