How do I handle situations where the javascript file has “relative” paths of images that it uses?

Question

These paths break when I upload my media directory to S3.

Here's my process:

I have a script that uploads my entire media directory to Amazon S3 CDN. So my website downloads images/css/js from that CDN.

But, a lot of my plugins from JQuery have images that are "relatively" defined. So when it puts to S3, that path doesn't make sense anymore.

What do I do in this case? I really want to put my media folder in S3, but I just wish the paths can be kept.

Example:

/media/js/fancybox/fancybox.js 
/media/js/fancybox/fancybox-image.png

When I run this in my Apache/Django server, it works, since fancybox.js calls the fancybox-image.js, and it detects it.

However, when I run it on my Amazon S3:

s3.amazon.com/my_bucket/js/fancybox/fancybox.js
s3.amazon.com/my_bucket/js/fancybox/fancybox-image.png

The javascript calls this image instead:

s3.amazon.com/my_bucket/fancybox-image.png

Answer 1

Define a URLbase variable in your JS so that in your development environment it's something like URLbase = "http://localhost" and on production it's URLbase = "http://s3.amazon.com/my_bucket"

Then when you're defining URLs you can prepend URLbase to the location, or define a utility function that will prepend the URLbase to the path (this would make it more flexible if you've got a few base URLs you want to mix in at once.)