基本（本地）HTML 不加载图像或 js，但加载 css答案

【问题标题】：Basic (local) HTML not loading Image or js but loading css基本（本地）HTML 不加载图像或 js，但加载 css
【发布时间】：2017-02-14 09:16:57
【问题描述】：

多年来我一直在使用网络，但今天我为一些超级简单的东西创建了一个基本的 Angular 应用程序，我只是使用 Angular 文件和一个 html 文件作为我的基础。

在做所有有角度的事情之前，我基本上只是让骨架开始运行，我注意到浏览器找不到 app.js 文件的相对路径。它可以找到 .css 文件，但不能找到 .js。

所以我把一张图片放进去测试，它也找不到！下面是我的代码：

<!DOCTYPE html>
<html ng-app="ecsApp">
    <head>
        <title>Client Services Support | Elite Chat</title>
        <link rel="stylesheet" href="public/stylesheets/foundation.min.css">
        <link rel="stylesheet" href="public/stylesheets/main.css">
        <base href="/">
    </head>
    <body ng-view>
        <img src="public/images/clock.jpg">
        TEST

        <script src="app_client/app.js"></script>
    </body>
</html>

这是我的文件夹结构：

project 
    > index.html
    > app_client 
        > app.js
    > public 
        > images 
            > clock.jpg
        > stylesheets
            > main.css

我可以使用图像的绝对路径（系统路径，IE c:\user\blah\folder\project\public\images\clock.jpg），它会显示出来。但显然系统路径是完全愚蠢且无法使用的。

任何想法为什么我不能做像显示图像这样简单的事情？我什至将图像放在与index.html 文件相同的位置，尝试过<img src="clock.jpg">，但它仍然无法显示图像。

【问题讨论】：

使用浏览器开发工具网络分析浏览器正在使用哪些 url。您的基本标记路径可能有问题
你看过源码然后点击js文件路径，结果什么都没有？
<body ng-view> 应该只有<body> 和下面你可以添加<div ng-view></div>
在开发控制台中显示file:///C:/app_client/app.js net::ERR_FILE_NOT_FOUND，当我查看源代码时，我无法单击代码/图像的源网址。
您需要在 localhost 服务器上运行它。如果没有<base>，您将获得样式和 js 加载，但您不能在文件协议中使用 ajax 来获取模板

标签： javascript html css angularjs css-selectors

【解决方案1】：

所以这个故事的寓意是当做比静态 HTML 网站更复杂的事情时，使用某种网络服务器。

如果您查看原始问题中的 HTML，您会在 <head> 部分看到：<base href="/">。当在本地编辑文件并且 not 使用 Web 服务器（例如 node.js 或 xampp 或任何您想要的）时，基本路径（浏览器中的 url）类似于

file:///C:/Users/person/folder/project/index.html#/

因此浏览器将尝试在疯狂的文件路径上基于<base> 标记（哈哈，双关语）加载文件。这就是为什么在这一点上以下是正确的：

不工作
<img src="public/images/clock.jpg">

工作
<img src="file:///C:/Users/person/folder/project/public/images/clock.jpg">

重要提示：
现在，如果我想修复这个问题，我可以运行 node.js 服务器并将这些文件扔进或上传到网络上以测试/查看所需的输出 relative em> src 属性。否则，我将不得不使用系统文件路径。

【讨论】：