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

将斜杠'\'替换为'/'。 URL必须是正斜杠

Answer 2

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

import createPalette from 'material-ui/styles/createPalette'; export const blue = { 50: '#e8eaf6', 100: '#c5cbe9', 200: '#9fa8da', 300: '#7985cb', 400: '#5c6bc0', 500: '#3f51b5', 600: '#394aae', 700: '#3140a5', 800: '#29379d', 900: '#1b278d', A100: '#c6cbff', A200: '#939dff', A400: '#606eff', A700: '#4757ff', 'contrastDefaultColor': 'light', }; export default { palette: createPalette({ primary: blue }) };指的是当前的工作目录。

./指的是父目录。

../指的是与工作目录位于同一位置的文件夹，同样为了访问文件夹内的文件，您可以使用正斜杠来引用它。

至于为什么当你在img标签里面使用反斜杠路径而不是在css中时它起作用，我真的不确定。但这不是一个好的做法，绝对不是正确的做事方式。希望，它有所帮助。

本地背景图像不显示在HTML中

2 个答案: