Question

我已经在网上工作多年了，但今天我开始使用一个基本的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文件相同的位置（{1}}，但它仍然无法显示图片。

Answer 1

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

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

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

因此浏览器会尝试在疯狂的文件路径上基于<base>标记（haha，pun）之后加载文件。这就是为什么在这一点上如下：

无效
<img src="public/images/clock.jpg">

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

重要：
现在，如果我想修复这个，我可以运行node.js服务器并将这些文件丢入或上传到Web以使用 relative src属性。否则，我必须使用系统文件路径。

基本（本地）HTML没有加载图像或js但加载CSS

1 个答案: