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


Best practice for linking images/files in different web folders

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

假设我有 www.mysite.com,其中我有div 的背景图像,onclick() ,div 更改背景图像。一切正常。当我有子文件夹时,问题就开始了,例如,我的博客。它看起来像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/...etc(是的,网址是正确的)。

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

如果它有任何区别,我正在编码点火器工作......

谢谢!!

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

为了包含文件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/中再次安装此应用程序,我只需将全局路径设置更改为"另一个appname。

我通常在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中,这很方便。