EMBER image loading isssue with css

1

Hi I am newbie to Ember-cli installed pattern-fly framework with ember

1.installed pattern fly as shown below $bower install --save-dev patternfly 2.imported all css,font files to ember-cli-build.js as shown below app.import(‘bower_components/patternfly/dist/img/bg-login.jpg’,{ destDir: ‘assets/img’ });

app.import(‘bower_components/patternfly/dist/css/patternfly.css’); app.import(“bower_components/moment/min/moment.min.js”); app.import(“bower_components/patternfly/dist/fonts/OpenSans-Regular-webfont.woff”,{ destDir: ‘fonts’ }); app.import(“bower_components/patternfly/dist/fonts/fontawesome-webfont.woff”, { destDir: ‘fonts’ }); app.import(“bower_components/patternfly/dist/fonts/fontawesome-webfont.woff2”, { destDir: ‘fonts’ }); app.import(“bower_components/patternfly/dist/fonts/PatternFlyIcons-webfont.ttf”, { destDir: ‘fonts’ }); app.import(“bower_components/patternfly/dist/fonts/OpenSans-Semibold-webfont.woff”, { destDir: ‘fonts’ }); app.import(“bower_components/patternfly/dist/fonts/OpenSans-Regular-webfont.ttf”, { destDir: ‘fonts’ });

app.import("bower_components/patternfly/dist/fonts/fontawesome-webfont.ttf",{
  destDir: 'fonts'
});
app.import("bower_components/patternfly/dist/fonts/PatternFlyIcons-webfont.woff", {
  destDir: 'fonts'
});
app.import("bower_components/patternfly/dist/fonts/OpenSans-Semibold-webfont.ttf",{
  destDir: 'fonts'
});
app.import("bower_components/patternfly/dist/fonts/OpenSans-Light-webfont.woff", {
  destDir: 'fonts'
});
app.import("bower_components/patternfly/dist/fonts/OpenSans-Light-webfont.ttf", {
  destDir: 'fonts'
});
app.import("bower_components/patternfly/dist/fonts/OpenSans-Bold-webfont.ttf",{
  destDir: 'fonts'
});
app.import("bower_components/patternfly/dist/fonts/OpenSans-Bold-webfont.woff", {
  destDir: 'fonts'
});

//app.import("/home/smita/aviat/bower_components/patternfly/dist/img/brand.svg");
app.import("bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js");
app.import("bower_components/patternfly/dist/css/patternfly.min.css");
app.import("bower_components/patternfly/dist/css/patternfly-additions.min.css");
 app.import("bower_components/patternfly/dist/css/patternfly-additions.css");
app.import("bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.css"),
app.import("bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker3.css"),
app.import("bower_components/bootstrap-select/dist/css/bootstrap-select.css"),
app.import("bower_components/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.css"),
app.import("bower_components/bootstrap-treeview/dist/bootstrap-treeview.min.css"),
app.import("bower_components/c3/c3.css"),
app.import("bower_components/datatables/media/css/jquery.dataTables.css"),
app.import("bower_components/datatables-colreorder/css/dataTables.colReorder.css"),
app.import("bower_components/datatables-colvis/css/dataTables.colVis.css"),
app.import("bower_components/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css"),
app.import("bower_components/font-awesome/css/font-awesome.css"),
app.import("bower_components/google-code-prettify/bin/prettify.min.css")

  1. created index.hbs route

                                    $   ember g route index

and in index.hbs file i have pasted the following code:

  </div><!--/#brand-->
</div><!--/.col-*-->
<div class="col-sm-7 col-md-6 col-lg-5 login">
  <form class="form-horizontal" role="form">
    <div class="form-group">
      <label for="inputUsername" class="col-sm-2 col-md-2 control-label">Username</label>
      <div class="col-sm-10 col-md-10">
        <input type="text" class="form-control" id="inputUsername" placeholder="" tabindex="1">
      </div>
    </div>
    <div class="form-group">
      <label for="inputPassword" class="col-sm-2 col-md-2 control-label">Password</label>
      <div class="col-sm-10 col-md-10">
        <input type="password" class="form-control" id="inputPassword" placeholder="" tabindex="2">
      </div>
    </div>
    <div class="form-group">
      <div class="col-xs-8 col-sm-offset-2 col-sm-6 col-md-offset-2 col-md-6">
        <div class="checkbox">
          <label>
            <input type="checkbox" tabindex="3"> Remember username
          </label>
        </div>
        <span class="help-block"> Forgot <a href="#" tabindex="5">username</a> or <a href="#" tabindex="6">password</a>?</span>
      </div>
      <div class="col-xs-4 col-sm-4 col-md-4 submit">
        <button type="submit" class="btn btn-primary btn-lg" tabindex="4">Log In</button>
      </div>
    </div>
  </form>
</div><!--/.col-*-->
<div class="col-sm-5 col-md-6 col-lg-7 details">
  <p><strong>Welcome to PatternFly | open interface project!</strong>
    This is placeholder text, only. Use this area to place any information or introductory message about your application that may be relevant for users. For example, you might include news or information about the latest release of your product here&mdash;such as a version number.</p>
</div><!--/.col-*-->

4.started my ember server $ ember s

5.on my browser localhost:4200 tthe ouput file is not loading background image

  1. where as the output should be loaded with the background image is not loading

7.can find the css of bg-image

1366×688 430 KB

this css can be found
‘bower_components/patternfly/dist/css/patternfly-additions.css’

and bg-image can be found at ‘bower_components/patternfly/dist/img/bg-login.jpg’

THANKS IN ADVANCE