本地背景图片未显示在html中

Question

I am trying to get background images working for html output from a system I develop for. 我正在尝试为我开发的系统的HTML输出获取背景图像。 I can output the page correctly, but the background images do not correctly display when referencing a file on the local machine; 我可以正确输出页面，但是在本地计算机上引用文件时背景图像不能正确显示； however if I reference the same image from an external site it works correctly. 但是，如果我从外部站点引用相同的图像，则它可以正常工作。

I have the html file saved at <USER_DOCUMENTS>\\Test_HTML.html and the example local image saved at <USER_DOCUMENTS>\\images\\test_image.png . 我将html文件保存在<USER_DOCUMENTS>\\Test_HTML.html并将示例本地图像保存在<USER_DOCUMENTS>\\images\\test_image.png 。 The image I am using for the example is this , but any suitable image that can be externally referenced should suffice. 我在示例中使用的图像是this ，但是可以从外部引用的任何合适的图像都足够。

Test_HTML.html Test_HTML.html

<html>
   <head>
      <style>
         td{font-family:arial; font-size:12pt; border:solid black 1pt;}
         .test_class{background-image:url(images\test_image.png); background-repeat:repeat; background-position:top left;}
      </style>
   </head>
   <table>
      <tr>
         <td class="test_class" style="width:40pt">Baap</td>
         <td class="test_class" style="width:60pt">Beep</td>
         <td class="test_class" style="width:80pt">Biip</td>
         <td class="test_class" style="width:100pt">Boop</td>
         <td class="test_class" style="width:120pt">Buup</td>
      </tr>
   </table>
   <hr/>
   <img src="images\test_image.png"/>
</html>

When viewing this in a browser (tested in Chrome, Firefox & IE), the image below the horizontal rule displays correctly, but there is no background displayed in the table. 在浏览器中进行测试（在Chrome，Firefox和IE中测试）时，水平尺下方的图像可以正确显示，但表格中没有显示背景。 However if url(images\\test_image.png) is replaced with url(<EXTERNAL_FILE_LOCATION>) then the background images display correctly. 但是，如果将url(images\\test_image.png)替换为url(<EXTERNAL_FILE_LOCATION>)则背景图像将正确显示。 The desired behaviour is to be able to use the local file and get the same output as when using an external file location. 所需的行为是能够使用本地文件并获得与使用外部文件位置时相同的输出。

I'm at a bit of a loss as to how to get this to work correctly on the local system, and any help would be appreciated. 我对如何使它在本地系统上正常工作感到迷茫，不胜感激。

Answer 1

Replace the slash '\\' to '/'. 将斜杠“ \\”替换为“ /”。 URL's have to be in forward slash 网址必须为正斜杠

Answer 2

Like, I mentioned in my comment above, "\\" or backslash is generally used for referring to the absolute path of a path and is a Windows standard for referring to the location of files. 就像我在上面的评论中提到的那样，“ \\”或反斜杠通常用于引用路径的绝对路径，并且是Windows的标准，用于引用文件的位置。 We make use of "/" or forward slashes as they are used to refer to the relative path with the current working file. 我们使用“ /”或正斜杠来表示当前工作文件的相对路径。 So, 所以，

./ refers to the current working directory. ./表示当前工作目录。

../ refers to the parent directory. ../指向父目录。

./images/ refers to a folder which is present in the same location as the working directory and likewise to access the files inside the folder, you put a forward slash to refer to it. ./images/指的是与工作目录位于同一位置的文件夹，同样地，要访问该文件夹中的文件，请在其前面加上一个斜杠以对其进行引用。

As for, why it worked when you used the backslash path inside the img tag but not in the css, I'm not really sure of. 至于，为什么当您在img标签中使用反斜杠路径而不在CSS中使用反斜杠路径时，它为什么起作用，我不确定。 But it's not a good practice and definitely not the proper way of doing things. 但这不是一个好习惯，而且绝对不是正确的做事方式。 Hope, it helps. 希望能帮助到你。

本地背景图片未显示在html中

问题描述

2 个解决方案

解决方案1
1 2017-11-23 11:33:27

解决方案2
1 已采纳

本地背景图片未显示在html中

问题描述

2 个解决方案

解决方案1 1 2017-11-23 11:33:27

解决方案2 1 已采纳

解决方案1
1 2017-11-23 11:33:27

解决方案2
1 已采纳