How to get locally saved image to appear in html running locally on Chrome by only specifying a path?

Question

I am trying to get an image img to display in an html element. Everything is saved and run locally using http-server. I just want to specify a path to the file and it is just for dev purposes. I plan to put all the files on a server when I'm done. In other words, I'm developing a website locally on my PC and testing it as I go because I don't know html very well and when I'm finished I'll transfer all the files over to the hosting companies server and rework the paths. Seems simple enough to me, but no go.

<!DOCTYPE HTML>
<html>

    <head>
        <title>test-Confluence Infinite International</title>
        <style>
            #ad_frame{ height:800px; width:100%; }
            body{ margin:0; border: 0; padding: 0; }
        </style>
    </head>
    <body>
        <img src="file:///C:/Users/Benjamin/Pictures/CII - Logo v6 - 2020-08-02 1219.PNG" alt="test.com" width="104" height="142">
        <div>
        test2
        </div>
    </body>

</html>

I'm using a 64-bit Windows 10 PC.

html file is saved in C:/Users/Benjamin/Documents/CII - Website Files - 2020-08-29 2053\Home.html

Image is save here C:/Users/Benjamin/Pictures/CII - Logo v6 - 2020-08-02 1219.PNG

I used this link to get the local server going: How to run html file on localhost?

downloaded node.js from here: https://nodejs.org/en/download/

I ran http-server via cmd and got this:

C:\Users\Benjamin>http-server
Starting up http-server, serving ./
Available on:
  http://10.0.1.2:8080
  http://127.0.0.1:8080
Hit CTRL-C to stop the server
[2020-08-30T13:05:14.979Z]  "GET /" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.135 Safari/537.36"
(node:3392) [DEP0066] DeprecationWarning: OutgoingMessage.prototype._headers is deprecated

I found this link, but it doesn't seem to work: https://superuser.com/questions/224500/how-to-display-local-images-in-chrome-using-file-protocol

When I refresh the tab in Chrome I get no errors usually:

[2020-08-30T13:41:12.976Z]  "GET /Documents/CII%20-%20Website%20Files%20-%202020-08-29%202053/Home.html" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.135 Safari/537.36"

What am I doing wrong? I've tried all sorts of variations on the path to the image file.

EDIT1: I've tried a few things from the comments, but nothing seems to work. I tried saving the image file, the index.html file, and the home.html file in the same location. That didn't help: <img src="file:///C:/Users/Benjamin/Documents/CII - Website Files - 2020-08-29 2053/CII - Logo v6 - 2020-08-02 1219.PNG" alt="" width="104" height="142">

I also tried "Pictures/CII - Logo v6 - 2020-08-02 1219.PNG", but that didn't work.

score 0 · Answer 1 · answered Aug 30 '20 at 14:20

0

At first i thought your problem was spaces in filename. When i tried this i got following error due to chrome security "Not allowed to load local resource:". I then added file to project (put in same place as index.html) and it worked with both spaces on no spaces so most likely it is a security problem.

answered Aug 30 '20 at 14:20

Maxqueue

2,194
2
23
55

@Maxqueque I don't get any errors popping up, but I do get an circle with an "i" in it and when I click on it I get a pop-up that states "Your connection to this site is not secure" which links here: https://support.google.com/chrome/answer/95617?visit_id=637343951624790451-1525962410&p=ui_security_indicator&rd=1 I'll try creating an index.html file in the same location and see if that makes any difference. – Aug 30 '20 at 14:43
I tried adding an `index.html` file to my documents then subdirectory that was blank and it didn't work. I tried just displaying the `index.html` file in the Chrome directly and the image didn't display. I tried putting everything in the same documents and subdirectory. Here is what I am doing now: `` – Aug 30 '20 at 14:53
Just put an image file in same spot as your landing page then just add following to your html file: – Maxqueue Aug 30 '20 at 15:09

score 0 · Answer 2 · answered Aug 30 '20 at 14:26

0

You should try

"Pictures/CII - Logo v6 - 2020-08-02 1219.PNG"

as the path for the Picture. This should Change the path from local to http. Therefore you shouldnt have any problems with acces.

answered Aug 30 '20 at 14:26

Surfdrum

1
1

I tried: `` and it didn't work. I get this error in cmd: `[2020-08-30T14:37:39.163Z] "GET /Documents/CII%20-%20Website%20Files%20-%202020-08-29%202053/Pictures/CII%20-%20Logo%20v6%20-%202020-08-02%201219.PNG" Error (404): "Not found"` – Aug 30 '20 at 14:33
Try to remove the spaces from zur path Like: Pictures/CII-Logov6-2020-08-021219.PNG or Pictures/CII_-_Logo v6_-_2020-08-02_1219.PNG – Surfdrum Aug 30 '20 at 14:39

score 0 · Answer 3 · answered Aug 30 '20 at 19:35

In the end, the answer was:

Before running http-server command in cmd, navigate to the location of the html files you want to display and this becomes your root directory for the server Then in your img whatever path you specified as you root directory (the directory you were in when you ran http-server from), can run a image file like this...directly out of the "root" directory:

<img src="http://127.0.0.1:8080/y.PNG" alt="test.com" width="104" height="142">

In the above case the image file name is y.png and I ran the http-server command from cmd while in directory C:/Users/Benjamin/Documents/CII - Website Files - 2020-08-29, where all files are located now (I changed the location of the image file). If you want to have a subdirectory for the images (which you probably should) do something like the following:

<img src="http://127.0.0.1:8080/images/y.PNG" alt="test.com" width="104" height="142">

How to get locally saved image to appear in html running locally on Chrome by only specifying a path?

3 Answers3