时间戳

首页 > 解决方案 > 使用 Python 的 HTTP 服务器和 HTML 中的图像

python - 使用 Python 的 HTTP 服务器和 HTML 中的图像

问题描述

我正在尝试使用 python 创建一个 HTTP 服务器。

一切正常，但图像未使用 localhost:{port} 在 Google chrome 或 Microsoft Edge 中加载。

我们可以在浏览器上看到什么

有代码：

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()

标签： pythonhtmlpython-3.xsocketshttp

解决方案

问题是由于您使用的是字符串，因此加载 HTML 内容后的浏览器会尝试加载图像，但随后会注意到您正在尝试读取本地文件并因此阻止请求。（如果您右键单击图像并单击复制图像地址，您可以看到它说"about:blank#blocked"）。您可以通过创建 HTML 文件或将图像作为字节嵌入字符串本身来避免这种情况。你可以这样做

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

并将以下内容添加到您的图像源（图像path的路径在哪里）

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

推荐阅读