CODEWITHSUNDEEP
pythonhtmlraspberry-pilighttpd
user_1
user_1

Reputation: 45

Lighttpd web server not displaying .png or.jpg image

I am trying to create a button on my lighttpd webserver that is based from a .png image.

The problem is that when I put my Raspberry Pi IP address in to the address bar the image does not show up. If I were to open the file index.html straight from the directories the image will show up.

This suggests to me that lighttpd requires some form of permission to access the image however I am not sure if this is the case and how I would go about rectifying this.

My index.html code is as shown below, I have checked the exact file locations and they match up to the code.

<html>
<head>
<script language="JavaScript">
var xmlhttp;
xmlhttp=new XMLHttpRequest();

function forward()
   {
       xmlhttp.open("GET","/var/www/html/forward.py", true);
       xmlhttp.send();
   }

</script>
</head>
<body>
<h1> Internet controlled robot vehicle </h1>
<img src="/var/www/html/forwardbutton.png" id="t" onmousedown="forward()">
</body>
</html>

Many thanks in advance

Upvotes: 1

Views: 1358

Answers (1)

Thomas
Thomas

Reputation: 181745

<img src="/var/www/html/forwardbutton.png" id="t" onmousedown="forward()">

This is not how the web works. The src attribute should be a URL, which the browser can use to fetch the image. It cannot be a local path on your web server, because the browser can't access files on the web server directly.

Assuming your index.html is in the same directory as the image, use a relative URL to refer to the image:

<img src="forwardbutton.png" id="t" onmousedown="forward()">

To check if permissions are set up correctly, you can open the image directly in your browser. Simply navigate to the URL:

http://<ip address of your Pi>/forwardbutton.png

The same thing goes for the XHR you seem to be attempting, although why you'd want to download a Python script into your browser is unclear to me.

Upvotes: 1

Related Questions