Displaying a numpy array on an html page (Flask)

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.

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.

Hey @KAlexK!

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

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?

@KAlexK thats what I meant sorry!

It happens to me too :slight_smile:

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

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

There is a tutorial here:

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

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 %}
    <h1>World generator</h1>
    <p>Generating an image of the world using perlin noise.</p>

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

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

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