链接不同网络文件夹中的图像/文件的最佳实践

Question

可能标题没有任何意义，所以我将详细解释我的问题。

假设我有 www.mysite.com ，我有 div 的背景图片 onclick() ， div 更改背景图片。一切正常。当我有子文件夹（例如 myblog）时，问题就开始了。它看起来像 www.example/myblog/post1.php 。在 post1 中，我得到了具有相同背景的相同 div，但 onclick 它不起作用，因为链接针对的是不存在的 img。

在第一种情况下，jquery 做得很好：www.mysite.com/assets/img/picture.jpg（这是实际位置）

在第二种情况下，jquery 正在添加以下链接：www.mysite.com/myblog/assets/img/picture.jpg 代码很简单，就像你想象的那样。点击执行

$('#div').css("background-image", "url("assets/img/picture.jpg")"); 

所以，当我添加 ../assets/img/picture.jpg 时，一切正常，但在根目录中则无法正常工作。

我尝试使用 url+assets/img/picture.jpg ，但我得到 www.mysite.com/www.mysite.com/...等 （是的，网址是正确的）。

所以我的问题是，如何处理这个问题？包括页眉和页脚也是如此。如果我在根目录上有“包含”文件夹，如果我在 /blog/post1.php 中，我将无法链接到它。我已经为此苦苦挣扎了一段时间，所以我想得到一些提示。

如果有什么不同，我正在使用 codeigniter....

谢谢！！

Answer 1

每当我将文件引用打印到页面中时，我都会相对于根地址打印它：

要包含文件http://mysite.com/assets/img/picture.jpg，我将使用/assets/img/picture.jpg 引用。因此浏览器将从根 (/) 页面开始查找此文件。

如果您将整个网站移动到另一个文件夹，这将是一个问题。这就是为什么我总是为我创建的每个应用程序保留一个全局设置，即“路径”设置。

例如应用程序http://mysite.com/app1/ 具有“路径”设置 =“app1”。当我将打印对页面的文件引用时，我会考虑此设置，例如：

$file_path = "assets/img/picture.jpg";    
echo "/$site_path/$file_path";

这将打印/app1/assets/img/picture.jpg。如果出于某种原因我需要在http://mysite2.com/anotherappname/ 中再次安装此应用程序，我只需将全局路径设置更改为“anotherappname”。

Answer 2

我通常在 PHP 中设置一个变量 $domain，它看起来像 http://www.example.com/（注意尾部斜杠）。然后我将 echo 设置为一个 Javascript 变量，如下所示：

<script>
var domain = '<?php echo $domain; ?>';
</script>

这个变量也可以在 Javascript 中使用。我可能会这样使用它：

<script>
$('#div').css("background-image", "url('" +domain + "assets/img/picture.jpg')");
</script>

如果您需要更改 $domain，那么这些更改将渗透到您的 Javascript 中，这很方便。