0

What I've done: I've created a small HTTP server python, using no modules but socket. It manages to start, load HTML and then send it out,

so you can see the HTML file in your browser.

What I'm using: I'm using Python 3.5.1, I'm also using Socket.

The problem: Images do not show on the web browser.

Here is the code I have put together:

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

Here is also the HTML code for the page, However it doesn't seem to be the problem:

<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;">

What the HTML code does: Shows text and an image.

If you need more detail just ask.

2 Answers 2

1

Where is test.png located? Looks like your HTML is having an issue finding the file. I ran your code locally and was able to see an image when I changed to image tag to source an image from a url.

I checked chrome dev tools first and noticed the image tag rendered fine.

I changed the image tag to (random image from google image search):

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

And it showed up fine.

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

3 Comments

Wow, thanks for the quick reply! it's in the same folder as the script and the HTML Thanks :)
Sure thing, get it to work ok? Make sure test.png is in the same directory as the HTML. If it's not - use an absolute path for the image.
No problem! Glad to help.
1

The issue is that no matter what the request you get to your HTTP server you are sending the content of page.html as response. This is because you hard coded this line in your server.

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

In your page.html you have an image that means browser (or any client that you use) will send a call to your server asking for image's source (content of test.png) but instead of reading the image's source you are again serving page.html's content. That is why the image appears broken.

To fix this you need to look at the resource that is requested and open that file and send the content as response from server. Take a look at what you have in request variable in your server code to get an idea of how you can get the name of the resource requested.

You might also want to send out the proper content-type header to let the client know how it has to handle the response.

1 Comment

Thank you for your response :) this makes sense! :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.