CODEWITHSUNDEEP
imageember.jshelperhandlebars.js
thodwris
thodwris

Reputation: 1377

how to appear the image in ember with handlebars

Hello I want to appear the image from code i wrote below but i cant. Any ideas? I googled and i found that i must use a helper function.

(template) showallapps.hbs

{{#if getappsexist}}
    {{#each app in getapp}}
       {{#each app.app_files}}
        {{#link-to "dashboard" app}}
            <img {{bind-attr src=get_url}} class="img-responsive">
        {{/link-to}}
        {{/each}}
        {{#link-to "dashboard" app}}
            {{app.app_name}}
        {{/link-to}}

(controller) showallapps.js

import Ember from 'ember';

export default Ember.ObjectController.extend({
  apps:[],

   getappsexist: function () {
    var appsexist = false;
    if (this.store.all('userapp').content.length > 0) {
        appsexist = true;
    }
    return appsexist;
}.property(),

getapp: function () {
   this.apps = this.store.all('userapp');
   return this.apps;
}.property(),

get_url: function (){  
  var url = 'http://' + JSON.parse(this.apps.content[2]._data.app_files).url;
  return url;  
}.property()

});

I have this json.

{
    "userapp": [
        {

        }, 
        {  
           "app_files": "{"url":"static.xxx.xxx/data/application/3911efd9-413a-11e1-b5e9-fbed80c8f6ba/eleutheris_epilogis.jpg","mime":"image/jpeg","name":"eleutheris epilogis.jpg"}" 
        } 
     ]
}

I get these errors: Uncaught Error: Assertion Failed: The value that #each loops over must be an Array. You passed {"url":"static.xxx.xxx/data/application/3911efd9-413a-11e1-b5e9-fbed80c8f6ba/eleutheris_epilogis.jpg","mime":"image/jpeg","name":"eleutheris epilogis.jpg"}

Upvotes: 0

Views: 2186

Answers (1)

Alex
Alex

Reputation: 483

You need to form the image url as a property of some type in your controller (as you did with the getUrl computed property). Then you can bind to that by doing something like this:

<img {{bind-attr src=getUrl}} class="img-responsive" />

Upvotes: 1

Related Questions