Estoy tratando de obtener una imagen de una URL y mostrarla en el navegador usando pyiodide y javascript y debajo está mi código:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /> <script defer src="https://pyscript.net/alpha/pyscript.js"></script> <py-env> - matplotlib - imageio </py-env> </head> <body> <h1>PyScript - images from API</h1> <div> <p> This webpage fetches a cat image from <a href="https://cataas.com/#/", target="_blank">cataas</a> and displays it below. </p> </div> <div id="image"></div> <py-script output="image"> from pyodide.http import pyfetch import asyncio from io import BytesIO import matplotlib.pyplot as plt import imageio.v3 as iio import io, base64 response = await pyfetch(url="https://cataas.com/cat", method="GET") img = iio.imread(BytesIO(await response.bytes()), index=None) plt.imshow(img) buf = io.BytesIO() plt.savefig(buf, format='png') buf.seek(0) img_str = 'data:image/png;base64,' + base64.b64encode(buf.read()).decode('UTF-8') <!-- imgplot = plt.imshow(img) imgplot --> </py-script> </body> <div id="textfield">A matplotlib figure:</div> <div id="pyplotdiv"><img id="pyplotfigure"/></div> <script> document.getElementById("pyplotfigure").src=pyodide.globals.img_str </script> </html>Aquí estoy usando pyscript que se ejecuta en el backend de pyiodide para abrir y trazar la imagen usando matplotlib y luego estoy convirtiendo la imagen a una cadena base64 en formato PNG y luego accediendo a los elementos JS desde python y reemplazando el src del elemento JS con este base64. Sin embargo, por alguna razón, la imagen no se muestra en la página HTML. Intenté imprimir la imagen usando la declaración de impresión para verificar si se está cargando bien o no. La declaración de impresión estaba imprimiendo valores de píxeles que mostraban que la imagen se estaba cargando bien.
Resolví el problema configurando la imagen en HTML en el propio código python. En la parte de python, se puede observar que estoy accediendo al elemento de la imagen y configurando el atributo src en la cadena de la imagen. A continuación se muestra el código de ejemplo:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" /> <script defer src="https://pyscript.net/alpha/pyscript.js"></script> <py-env> - matplotlib - imageio </py-env> </head> <body> <h1>PyScript - images from API</h1> <div> <p> This webpage fetches a cat image from <a href="https://cataas.com/#/", target="_blank">cataas</a> and displays it below. </p> </div> <div id="image"></div> <py-script output="image"> from pyodide.http import pyfetch from js import document import asyncio from io import BytesIO import matplotlib.pyplot as plt import imageio.v3 as iio import io, base64 response = await pyfetch(url="https://cataas.com/cat", method="GET") img = iio.imread(BytesIO(await response.bytes()), index=None) plt.imshow(img) buf = io.BytesIO() plt.savefig(buf, format='png') buf.seek(0) img_str = 'data:image/png;base64,' + base64.b64encode(buf.read()).decode('UTF-8') #Here I am setting the value of src of HTML element to that of the image string. pfig = document.getElementById("pyplotfigure") pfig.setAttribute("src",img_str) <!-- imgplot = plt.imshow(img) imgplot --> </py-script> </body> <div id="textfield">A matplotlib figure:</div> <div id="pyplotdiv"><img id="pyplotfigure"/></div> </html>