Displaying a numpy array on an html page (Flask)

Code Help Python
1

I am creating a Python website using the Flask framework. This site will have to generate an image and display it on the page. I already have the code to generate (it outputs a numpy array), but I do not know how to display this image in an html template.

Question:
How to display a numpy array type image on an html page?

Tell me if you need to provide code snippets and/or a link to the repl.

2

Hey @KAlexK!

Can you provide a link to your website so we can look into it further?

3

The website is not ready at the moment. You cannot view the generated image in it. The site is not running.

Instead of providing a link to the site, I can give a link to the repl. Will that suit you?

4

@KAlexK thats what I meant sorry!

5

It happens to me too :slight_smile:

Link to the repl: https://replit.com/@KAlexK/Worldgeneratorsitetest

6

You can use use Pillow, which can convert the numpy array into an image.

There is a tutorial here:

7

How should I use the image in the template? Will I have to use the <img> tag? If so, how?

8

You can include an <img> tag in the template. The src attribute of the <img> tag should point to the location of the image file. For example:

{% extends 'base.html' %}

{% block title %}World generator{% endblock %}

{% block content %}
<div>
    <h1>World generator</h1>
    <p>Generating an image of the world using perlin noise.</p>
</div>

<div>
    <img src="{{ url_for('static', filename='images/generated.png') }}" alt="Generated image">
</div>
{% endblock %}

I’d recommend create a images folder inside your static folder to store the converted images. After that you just change the filepath.

9

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.