如何处理 javascript 文件具有它使用的图像的“相对”路径的情况？

Posted 2023-02-24

【中文标题】如何处理 javascript 文件具有它使用的图像的“相对”路径的情况？

【英文标题】：How do I handle situations where the javascript file has "relative" paths of images that it uses?

【发布时间】：2011-06-18 08:31:18

【问题描述】：

当我将媒体目录上传到 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

【问题讨论】：

你能用代码展示一个例子吗？我不明白。

【参考方案1】：

在您的 JS 中定义一个 URLbase 变量，以便在您的开发环境中它类似于 URLbase = "http://localhost" 而在生产环境中它是 URLbase = "http://s3.amazon.com/my_bucket"

然后，当您定义 URL 时，您可以将 URLbase 附加到位置，或者定义一个实用函数，将 URLbase 附加到路径（如果您有一些基本 URL，这将使其更加灵活）立即混合。）

【讨论】：

我必须修改我所有的 JQuery 插件？

好吧，今天早上头脑更清楚了，看来我和佩卡一样被你的问题弄糊涂了。请发布代码示例，以便我更好地理解问题，并相应地编辑我的答案。