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

Question

我正在尝试为我开发的系统的HTML输出获取背景图像。 我可以正确输出页面，但是在本地计算机上引用文件时背景图像不能正确显示； 但是，如果我从外部站点引用相同的图像，则它可以正常工作。

我将html文件保存在<USER_DOCUMENTS>\\Test_HTML.html并将示例本地图像保存在<USER_DOCUMENTS>\\images\\test_image.png 。 我在示例中使用的图像是this ，但是可以从外部引用的任何合适的图像都足够。

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>

在浏览器中进行测试（在Chrome，Firefox和IE中测试）时，水平尺下方的图像可以正确显示，但表格中没有显示背景。 但是，如果将url(images\\test_image.png)替换为url(<EXTERNAL_FILE_LOCATION>)则背景图像将正确显示。 所需的行为是能够使用本地文件并获得与使用外部文件位置时相同的输出。

我对如何使它在本地系统上正常工作感到迷茫，不胜感激。

Answer 1

将斜杠“ \\”替换为“ /”。 网址必须为正斜杠

Answer 2

就像我在上面的评论中提到的那样，“ \\”或反斜杠通常用于引用路径的绝对路径，并且是Windows的标准，用于引用文件的位置。 我们使用“ /”或正斜杠来表示当前工作文件的相对路径。 所以，

./表示当前工作目录。

../指向父目录。

./images/指的是与工作目录位于同一位置的文件夹，同样地，要访问该文件夹中的文件，请在其前面加上一个斜杠以对其进行引用。

至于，为什么当您在img标签中使用反斜杠路径而不在CSS中使用反斜杠路径时，它为什么起作用，我不确定。 但这不是一个好习惯，而且绝对不是正确的做事方式。 希望能帮助到你。

本地背景图片未显示在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 已采纳