Kenny Kenny - 1 month ago 5
CSS Question

Basic (local) HTML not loading Image or js but loading css

I've been working with the web for years, but today I started a basic Angular app for something super simple and I'm just using the angular files and a single html file for my base.

Before doing all the angular stuff, I'm basically just getting the skeleton going and I noticed the browser couldn't find the relative path to the app.js file. It can find the .css files, but not the .js.

So I put an image in to test and it can't find that either! Here's my code below:

<!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>


Here's my folder structure:

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


I can use an absolute path of the image (system path, IE c:\user\blah\folder\project\public\images\clock.jpg) and it will display. But obviously a system path is completely stupid and unacceptable to use.

Any ideas why I cannot do something as simple as display an image? I even put the image in the same location as the
index.html
file a tried
<img src="clock.jpg">
and it still wouldn't display image.

Answer

So the moral of this story is going to be when doing anything more complex than a static HTML site, use a web server of some kind.

If you look at the HTML in the original question, you'll see in the <head> section this: <base href="/">. When editing the files locally and not using a web server (e.g. node.js or xampp or whatever you wish) then the base path (url in the browser) is something like

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

and therefore the browser will try to load files after that <base> tag based (haha, pun) on the crazy file path. That's why at that point the following is true:

not working
<img src="public/images/clock.jpg">

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

Important:
Now, if I wanted to fix this, I could either run a node.js server and toss these files in or upload to the web to test/view the desired output with the relative src attribute. Otherwise, I'd have to use the system file path.