CODEWITHSUNDEEP
angularjsimagethumbnails
shamila
shamila

Reputation: 1330

how to get the thumbnail image of an uploaded image in angularjs

I uploaded an image and save it as thumbnail in the mongodb, but when I retrieve it to the app the thumbnail image is not showing. This is application.js

Here is my code 

    var mongoose = require('mongoose');
    var thumbnailPluginLib = require('mongoose-thumbnail');
    var thumbnailPlugin = thumbnailPluginLib.thumbnailPlugin;

    var Schema = mongoose.Schema;

        enter code here

    var ApplicationSchema = new Schema({
        appName: String,
        appTempPath:String,
        userId : String,
        status : String,
        templateId: String,
        themeColor : String,

    });
    ApplicationSchema.plugin(thumbnailPlugin, {
      name: "appIcon"


    });

    var Application = mongoose.model('Application', ApplicationSchema);

This is my view.html

<a ui-sref="{{templateApp.target}}">
    <button class="panel panel-primary" title="App information">
    <img src="{{templateApp.image}}"></img>
        <div class="panel-heading">{{templateApp.title}}</div>
            <div class="panel-body">
              <div ng-show='!!templateApp.info'>


                  <hr/><span class="product__price highlight">
                {{templateApp.info}}</span>
              </div>
        </div>
  </button>
</a>

The image I upload might be big, but through mongoose-thumbnail it becomes a little icon. I need a little icon to appear in my appbox. The image is not appearing in my appBox. please give me an answer to this problem. The url is coming to the view from the database as in the inspect.

Upvotes: 0

Views: 1965

Answers (1)

Doron Sinai
Doron Sinai

Reputation: 1186

Try using ng-src and not just src in your img

from the docs:

Using Angular markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrc directive solves this problem.

Edit: After seeing the image source(in the comments), it need to be cleared and only consists of http://....

Upvotes: 1

Related Questions