How to pass URL into <img> tag from Webapi to accept image of base64?

Question

How to pass URL from Webapi into <img> tag. I have converted the image into base64 string and inserted into Database as a varbinary .

<img src="https://localhost:44381/api/Account/get-resource-image;data:image/jpg;base64" alt="img"/>

Answer 1

You need to add data:image/png;base64 at the start of Webapi endpoint in <img> src and not after. See the below code.

<img src="data:image/jpg;base64,https://localhost:44381/api/Account/get-resource-imagedata" alt="img"/>

Another way to achieve same thing:

JQuery:

$.ajax({
        url: 'https://localhost:44381/api/Account/get-resource-imagedata',
        type: "GET",
        success: function (data) {
            $('#imgImage').attr('src', data);
        }
});

In HTML:

<img id="imgImage" src="#" alt="img"/>

Answer 2

Use angularjs ng-src . First execute a GET request in your controller and then save the response in a variable to use it with ng-src :

$http.get('https://localhost:44381/api/Account/get-resource-imagedata').then(function(response) {
    $scope.image = response.data;
});

In template:

<img data-ng-src="data:image/jpg;base64,{{image}}" alt="img"/>

Answer 3

Here's an example to show base64 images.

<img src="data:image/jpeg;base64,R0lGODlhPQBEAPeoAJosM//AwO/AwHVYZ/z595kzAP/s7P+goOX"/>