Kenny Kenny - 1 year ago 36
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">
<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="/">
<body ng-view>
<img src="public/images/clock.jpg">

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

Here's my folder structure:

> 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
file a tried
<img src="clock.jpg">
and it still wouldn't display image.

Answer Source

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


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

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

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.