# Loading assets (images, ...) depending on environment

**URL:** <https://discuss.emberjs.com/t/loading-assets-images-depending-on-environment/6803>\
**Category:** Ember CLI\
**Created:** [November 27, 2014, 2:40pm UTC](https://discuss.emberjs.com/t/loading-assets-images-depending-on-environment/6803 "2014-11-27T14:40:23Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![francesconovy](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/francesconovy/32/9607_2.png) [@francesconovy](https://discuss.emberjs.com/u/francesconovy)\
**Post date:** [November 27, 2014, 2:40pm UTC](https://discuss.emberjs.com/t/loading-assets-images-depending-on-environment/6803/1 "2014-11-27T14:40:23Z")

</div>

It is possible to include assets in ember CLI, and you can simply wrap them in an if-statement to include them depending on the environment. However, it is only possible to load these assets from bower\_components/ or vendor/, as far as I know.

Is there a way to include assets like images depending on the environment?

As an example: I have an image assets/img/logo.png, and depending on the environment in the build process I want this image to be either logo\_1.png or logo\_2.png.

We have an ember app which is deployed on different servers with slightly different settings (like the API base URL), and different branding, and I have found no way to achieve this so far.

---

<div class="post-metadata">

**Author:** ![harianus](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/harianus/32/14069_2.png) [@harianus](https://discuss.emberjs.com/u/harianus)\
**Post date:** [June 6, 2016, 10:59am UTC](https://discuss.emberjs.com/t/loading-assets-images-depending-on-environment/6803/2 "2016-06-06T10:59:48Z")

</div>

For people landing here, maybe you should look at [Different robots.txt for production and staging](http://discuss.emberjs.com/t/different-robots-txt-for-production-and-staging/9358)

---

<div class="post-metadata">

**Author:** ![broerse](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/broerse/32/9497_2.png) [@broerse](https://discuss.emberjs.com/u/broerse)\
**Post date:** [June 6, 2016, 11:34am UTC](https://discuss.emberjs.com/t/loading-assets-images-depending-on-environment/6803/3 "2016-06-06T11:34:25Z")

</div>

Yes use `treeForPublic` in your own deploy plugin.

> <https://github.com/martinic/ember-cli-deploy-build-plus/blob/master/index.js#L30>

---

<div class="post-metadata">

**Author:** ![harianus](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/harianus/32/14069_2.png) [@harianus](https://discuss.emberjs.com/u/harianus)\
**Post date:** [June 6, 2016, 11:42am UTC](https://discuss.emberjs.com/t/loading-assets-images-depending-on-environment/6803/4 "2016-06-06T11:42:42Z")

</div>

Or if you want to use it without an addon:

```nohighlight
'use strict';

const EmberApp = require('ember-cli/lib/broccoli/ember-app');
const stew = require('broccoli-stew');

module.exports = (defaults) => {
  const ENV = require('./config/environment')(process.env.EMBER_ENV);

  const app = new EmberApp(defaults, {
    // Your options...
  });

  // Make sure the correct robots.txt is there
  let tree = app.toTree();
  if (ENV.environment === 'production') {
    tree = stew.rm(tree, 'logo_2.png');
    tree = stew.rename(tree, 'logo_1.png', 'logo.png');
  } else {
    tree = stew.rm(tree, 'logo_1.png');
    tree = stew.rename(tree, 'logo_2.png', 'logo.png');
  }
  return tree;
};

```

So if you use this you can add two files `logo_1.png` and `logo_2.png` and it will rename the one you want to `logo.png` and removes the other one.

And of course you need to install [broccoli-stew](https://github.com/stefanpenner/broccoli-stew) by running `npm install broccoli-stew --save-dev` in the terminal.