Fetch image from database using angularjs

Question

Unable to Load Image from database(Image is in byte[]) below is my code

  <div ng-app="MyProductApp">
        <h1>Category List</h1>
        <div ng-controller="ProductsController">
            <table>
                <tr ng-repeat="category in Category | orderBy : 'CategoryName'">
                    <td><a ng-click="redirectToProductWiseCategories($event)" id="{{category.CategoryID}}">{{category.CategoryName}}</a></td>
                    <td>
                        <img ng-src="data:image/JPEG;base64,{{category.Picture}}" alt="img" />
                    </td>
                </tr>

            </table>
        </div>
    </div>

Below is my Method, what am I doing wrong here please. Answers would be really appreciated. Thank you in advance

 <script>
        var app = angular.module("MyProductApp", []);
        app.controller("ProductsController", function ($scope, $http) {
            $http.get('/api/Products/GetAllCategories').
              success(function (data, status, headers, config) {
                  //debugger;
                  $scope.Category = data;
              }).
              error(function (data, status, headers, config) {
                  alert("erro");
              });
        });
    </script>

any errors in console ? could you please make a plunker ?

macrog
– macrog

2015-11-11 09:04:20 +00:00
Commented Nov 11, 2015 at 9:04 — macrog
– macrog, Commented Nov 11, 2015 at 9:04
no error in cconsole.

Muzammil
– Muzammil

2015-11-11 10:04:08 +00:00
Commented Nov 11, 2015 at 10:04 — Muzammil
– Muzammil, Commented Nov 11, 2015 at 10:04

Beckham_Vinoth · Accepted Answer · 2016-06-04 09:49:55Z

2

Try like this,

<div  ui-sref="task" class="col-lg-3 col-md-5 col-sm-6" ng-repeat="x in tasklist|filter:searchString">
    <div class="main-box clearfix profile-box">
	  <div class="main-box-body clearfix">
		<div class="profile-box-header" padding-bottom:222px;">
		<img src="{{x.imageUrl}}"/>
		  <div style=""></div>
		</div>
            <div class="profile-box-footer clearfix" >
				<span class="value" >  {{x.title}}</span>
				<span>{{x.description}}</span>

imageUrl is A field in Database, There i stored my images and retrive like this.

answered Jun 4, 2016 at 9:49

Beckham_Vinoth

7213 gold badges14 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Fetch image from database using angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related