image in a HTTP server and HTML using Python

Question

I'm trying to create an HTTP server with python.

All is working exept the image does not load in Google chrome or Microsoft Edge using localhost:{port}.

There is the code :

import socket
import time

http_head = "HTTP/1.1 200 OK\r\n"
http_head += "Date:"+ time.asctime() +"GMT\r\n"
http_head += "Expires: -1\r\n"
http_head += "Cache-Control: private, max-age=0\r\n"
http_head += "Content-Type: text/html;"
http_head += "charset=utf-8\r\n"
http_head += "\r\n"
data = "<html><head><meta charset='utf-8'/></head>"
data += "<body><h1>In321 is the best course ! (doubt) </h1>"
data += "\r\n"
data += "<img src=\"C:\\Users\\aliel\\OneDrive\\Documents\\GitHub\\TP2_In321\\crying_cat_with_thumb_up.jpg\" alt=\"A crying cat with thumb up\">"
data += "</body></html>\r\n"
data += "\r\n"
http_response = http_head.encode("ascii") + data.encode("utf-8")

TCP_IP = '127.0.0.1'
TCP_PORT = 55000
BUFFER_SIZE = 1024

s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)

s.bind((TCP_IP, TCP_PORT))  # Demande à l’OS d’associer la socket à une ip/port

s.listen(1)   # transforme la socket en socket de connexion
print(" Waiting client… ")


scom, caddr = s.accept()
print("client connected with address : ", caddr)
data = scom.recv(BUFFER_SIZE)
print("received data:", data.decode('utf-8'))
scom.send(http_response)

s.close()
scom.close()

Instead of using sockets to create an HTTP server, you can also try using the http.server module which is part of the python standard library. — kinshukdua
– kinshukdua, Commented Apr 26, 2021 at 0:03

kinshukdua · Accepted Answer · 2021-04-26 10:28:10Z

2

The problem is since you're using a string, the browser after loading the HTML content tries to load the image but then notices that you're trying to read a local file and hence blocks the request. (If you right click the image and click copy image address you can see it says "about:blank#blocked"). The way you can circumvent this is either by Creating an HTML file or embedding the image as bytes in the string itself. You can do that as follows

import base64
with open(path,"rb") as i:
    encoded_string = base64.b64encode(i.read()).decode( 'utf-8' )

and adding the following to your image source (where path is the path to your image)

data += f'<img src="data:image/png;base64, {encoded_string}">'

edited Apr 26, 2021 at 10:28

answered Apr 26, 2021 at 0:31

kinshukdua

2,0041 gold badge7 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

libano91 Over a year ago

So I added

import base64 with open("C:\\Users\\aliel\\OneDrive\\Documents\\GitHub\\TP2_In321\\crying_cat_with_thumb_up.jpg","rb") as i:     encoded_string = base64.b64encode(i.read())

to my code, then I replaced src=\"C:\\Users\\aliel\\OneDrive\\Documents\\GitHub\\TP2_In321\\crying_cat_with_thumb_up.jpg\" by src=\"data:image/jpeg;base64;+encoded_string\" But nothing changed.

libano91 Over a year ago

And instead of /a, I write the path ?

kinshukdua Over a year ago

Yes. Here, I'll fix it. Try using this instead: with open(path,"rb") as i: encoded_string = base64.b64encode(i.read()).decode( 'utf-8' ) and add data += f'<img src="data:image/jpeg;base64, {encoded_string}">'

Collectives™ on Stack Overflow

image in a HTTP server and HTML using Python

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related