ember-2.9-dynamic-img-src-attribute

components.my-img.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'img',
  attributeBindings: ['imagePath:src', 'imageName:alt'],
  
  imagePath: '',  
  imageName: ''
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  imageName: 'Andromeda',
  imagePath: 'http://www.andromedacouncil.com/files/QuickSiteImages/Andromeda_-_galaxy.jpg'
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.image {
  width: 20rem;
}

templates.application.hbs

<h1>Image Rendering with multiple `src` attribute approaches</h1>


<h2>Plain <code>&lt;img&gt;</code>, hardcoded <code>src</code> and <code>alt</code></h2>

<img class="image" src="http://www.andromedacouncil.com/files/QuickSiteImages/Andromeda_-_galaxy.jpg" alt="Andromeda">


<br>
<br>


<h2><code>&lt;img&gt;</code> with dynamic <code>src</code> and <code>alt</code></h2>

<img class="image" src={{imagePath}} alt={{imageName}}>


<br>
<br>


<h2>Components with <code>tagName: 'img'</code> and <code>attributeBindings: ['imagePath:src', 'imageName:alt']</code></h2>

<br>

<h4>Hard-coded <code>src</code> and <code>alt</code> arguments</h4> 

{{my-img
class="image"
imageName=imageName
imagePath=imagePath}}

<br>

<h4>Dynamic <code>src</code> and <code>alt</code> arguments</h4> 


{{my-img
class="image"
imageName="Andromeda"
imagePath="http://www.andromedacouncil.com/files/QuickSiteImages/Andromeda_-_galaxy.jpg"}}

<br>

<h4>Image available over HTTPS (just to rule out odd security issues)</h4> 


{{my-img
class="image"
imageName="Google Logo"
imagePath="https://www.google.com/logos/doodles/2015/googles-new-logo-5078286822539264.3-hp2x.gif"}}

twiddle.json

{
  "version": "0.10.5",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.9.0-beta.3",
    "ember-data": "2.8.0",
    "ember-template-compiler": "beta",
    "ember-testing": "beta"    
  },
  "addons": {}
}