javascript - 如何处理 javascript 文件具有它使用的图像的 "relative"路径的情况？

Question

当我将我的媒体目录上传到 S3 时，这些路径中断。

这是我的过程:

我有一个脚本可以将我的整个媒体目录上传到 Amazon S3 CDN。所以我的网站从那个 CDN 下载 images/css/js。

但是，我的很多 JQuery 插件都有“相对”定义的图像。所以当它放到 S3 时，这条路径就不再有意义了。

在这种情况下我该怎么办？我真的很想把我的媒体文件夹放在 S3 中，但我只希望路径可以保留。

例子:

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

当我在我的 Apache/Django 服务器上运行它时，它工作正常，因为 fancybox.js 调用了 fancybox-image.js，并且它检测到它。

但是，当我在我的 Amazon S3 上运行它时:

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

javascript 改为调用此图像:

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

Answer 1

在你的 JS 中定义一个 URLbase 变量，这样在你的开发环境中它就像 URLbase = "http://localhost" 而在生产环境中它是 URLbase = "http://s3 .amazon.com/my_bucket"

然后，当您定义 URL 时，您可以将 URLbase 添加到该位置，或者定义一个将 URLbase 添加到路径的实用函数(如果您有几个要添加的基本 URL，这将使它更加灵活)立即混合。)