正确使用图像文件中的相对路径

时间:2014-11-10 10:27:00

标签: html relative-path

从我的发展生涯开始,让我感到困惑的一件事就是相对和绝对的道路。

现在我以URL的方式理解它,如果您要访问同一服务器上的网页,则使用相对路径,如果页面位于不同的(外部)服务器上,那么您将需要使用绝对值路径即http://www.google.com。但我从不以文件的方式理解它。

示例和我的问题。

我正在构建一个HTML电子邮件类,它将图像作为横幅发送为img

 builder.AppendLine("<img src=C:\Images\\MailBanner.jpg\" alt=\"banner\">"); 

现在,如果我使用上面的绝对路径,将显示图像。

但是,当我将网站部署到我们的网络服务器上时,当然,图像不在C:驱动器中,因此图像不会出现在电子邮件中。那么我需要将\..\放在源代码中?

是否将图像存储在项目中的Web服务器上?

我猜你可能需要更多的信息然后我发布了,但我可能需要一些解释。

由于

3 个答案:

答案 0 :(得分:0)

只需将图像放在项目文件夹下的文件夹图像中,您的代码就是:

builder.AppendLine("<img src=\"\images\MailBanner.jpg\" alt=\"banner\">");

您的图片路径是:

/project/images/MailBanner.jpg

您的项目通常位于Web服务器文件夹的www文件夹下。

答案 1 :(得分:0)

在项目中设置images文件夹并修复src属性:

builder.AppendLine('<img src="images/mailbanner.jpg" alt="banner">');

编辑:这里的问题是你的javascript代码。您需要在标记和引号之前和之后使用撇号作为img标记的属性。否则你的javascript无法理解你的属性是什么。

答案 2 :(得分:0)

我更喜欢大多使用相对路径,因为当您将数据从本地位置移动到Web服务器时,只要目录结构没有改变就不会中断。但是,操作系统也很重要 例如,我可以看到您的文件是从Windows服务器移动的。因此,除非您将其移动到另一台Windows服务器并且驱动器号相同,否则您的绝对路径将被破坏。

如果文件被移动到具有完全相同目录结构的Windows服务器:

builder.AppendLine('<img src="C:\Images\MailBanner.jpg" alt="banner">');

如果文件被移动到linux服务器:

www/images

builder.AppendLine('<img src="/Images/MailBanner.jpg" alt="banner">');

注意:第一个正斜杠非常重要。 /告诉Apache该目录位于文档根目录(www)中。如果没有/,Apache希望该目录位于文件/脚本所在的当前目录中。将文件从Windows移动到Linux时,另一个重要的考虑因素是Linux 区分大小写。 /Images/MailBanner.jpg与images / mailbanner.jpg不同。