Best way to prepend CDN URL to all images/videos

So we are currently using S3 for all our assets and need to prepend all url’s within image and embed tags. We have tried using the fingerprinting from broccoli-assets-rev built into EmberCLI. But there are two issues that it brings up:

  1. We don’t want fingerprinting on our image/video assets. Adding the folders to the exclude list will not prepend our CDN url to the assets.

  2. CDN is not prepended to bounded-image assets. So if we had in a template "<img src="/assets/images/{{product-name}}-{{product-image-type}}.jpg">" … the cdn/fingerprint will not work on it.

Our last resort, we ended up creating a component for rendering all our images/videos. But I feel doing it this way is horribly inefficient given how much images are in each page. Does anyone know any solution to this? Many thanks in advanced.

We are actually doing this with a combination initializer & service. A typical, knee-jerk question is always "why not just code the CDN URL in the <img src="" />? In most cases, you can get a lot of traction and distance out of this. Assuming you’ve thought of this and, like me, needed something more, read on.

In my case, I have to support Dev, QA, Staging and Prod environments, all with different CDN urls, so this had to pulled out to a service/config. To further complicate the process, not all images would pull from the same CDN, if they were pulled from a CDN at all.

Pseudo-code follows :

In my templates, I’d have something like:

<img src="{{linksService.cdnGraphicsHostUrl}}/img/{{product-name}}-{{product-image}}" />

The short version of my initializer and service would be:

export var initialize = function (container, app) {
    // application.injection('route', 'foo', 'service:foo');
    app.inject('controller', 'linksService', 'service:linksService');
    app.inject('component', 'linksService', 'service:linksService');
};
export default {
    name: 'linksService',
    before: 'store',
    initialize: initialize
};

and

import Ember from 'ember';

export default Ember.Service.extend({
    cdnGraphicsHostUrl: function () {
        // execute some other code here
        return "//s3.amazonaws.com/item-bucket/item-object";
    }
});
1 Like

Thanks so much for your help!