Python HTTPサーバーで画像を使用できません

Question

私が行ったこと： モジュールではなくソケットを使用して小さなHTTPサーバーのPythonを作成しました。それはあなたのブラウザでHTMLファイルを見ることができるように開始、HTMLをロードしてからそれを送信することを管理します。

私が使用しているもの： 私はPython 3.5.1を使用しています。私はSocketも使用しています。

問題： 画像はWebブラウザに表示されません。ここで

は、私が一緒に入れているコードです：ここでは

import socket 

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

HOST = '' 
PORT = 8888 

asked_url = [] 

s.bind((HOST, PORT)) 

s.listen(1) 

while True: 
    conn, addr = s.accept() 

    request = conn.recv(1024) 

    html_file = open("page.html", 'rb') 
    try: 
     http_response = html_file.read() 
     conn.sendall(http_response) 
     conn.sendall(b'<p><small>PyWeb</small></p>') 
    except: 
     print("Couldn't send any data! Passing...") 
     pass 
    conn.close() 

は、ページのHTMLコードである、しかし、問題ではないようです。

<script src="https://mcapi.us/scripts/minecraft.js"></script> 
<div class="server-status"> 
    My awesome server is currently <span class="server-online"></span>! 
</div> 
<script> 
    MinecraftAPI.getServerStatus('SERVER HERE', { 
    port: 25565 // optional, only if you need a custom port 
    }, function (err, status) { 
    if (err) { 
     return document.querySelector('.server-status').innerHTML = 'Error loading status'; 
    } 

    // you can change these to your own message! 
    document.querySelector('.server-online').innerHTML = status.online ? 'up' : 'down'; 
    }); 
</script> 

<img src="test.png" alt="Test Image" style="width:304px;height:228px;"> 

何HTMLコードは テキストと画像を表示します。

より詳細が必要な場合は質問してください。

Answer 1

test.pngはどこにありますか？あなたのHTMLがファイルを見つけるのに問題があるようです。私はあなたのコードをローカルに走らせ、URLから画像を取得するために画像タグに変更したときに画像を見ることができました。

まず、chrome開発ツールを確認し、画像タグがうまく表示されていることに気付きました。

私は（Google画像検索からランダム画像）にイメージタグを変更：

`<img src="http://emojipedia-us.s3.amazonaws.com/cache/f8/69/f869f6512b0d7187f4e475fc9aa7f250.png" alt="Test Image">` 

そしてそれは罰金を示しました。

Answer 2

問題は、HTTPサーバーにどのようなリクエストを行っても、内容としてpage.htmlを応答として送信していることです。これは、サーバーでこの行をハードコーディングしたためです。サーバーへのコールを送信するブラウザ（またはあなたが使用するすべてのクライアント）を意味イメージを持っているあなたのpage.htmlで

html_file = open("page.html", 'rb') 

画像のソース（test.pngの内容）を求める代わりのイメージのソースを読んで、あなたは、再びpage.htmlのコンテンツを配信しています。そのため、画像が壊れているように見えます。

これを解決するには、要求されたリソースを見て、そのファイルを開き、サーバーからの応答としてコンテンツを送信する必要があります。要求されたリソースの名前を取得する方法を知るために、サーバーコードの変数requestにあるものを見てください。

適切なコンテンツタイプヘッダーを送信して、クライアントが応答をどのように処理する必要があるかを知ることもできます。