-1

I have a Flask app which runs Selenium to extract an image through XPATH. The .JPG image is saved to MySQL DB (Binary), then it should be rendered to HTML. The problem is that it isn't rendered.

Any thoughts?

Column Type:

profile_picture = Column(BLOB)

Get the image using Selenium:

profile_picture = WebDriverWait(browser, 2).until(EC.presence_of_element_located((By.XPATH,
        "//*[@id='react-root']/section/main/div/button/img")))

src = profile_picture.get_attribute('src')

Save the picture to the DB (MySQL):

settings_db.profile_picture = profile_picture

Fetching the image from the DB:

profile_picture = TABLE.query.filter_by(username=current_user.username).first()
profile_picture = profile_picture.profile_picture

Rendering (FLASK):

return render_template('index.html', profile_picture=profile_picture)

HTML:

<img src="{{ profile_picture }}" alt="User Image">



The image is never displayed and the output in HTML between braces is 'unknown'.

Julio S.
  • 944
  • 1
  • 12
  • 26

1 Answers1

1

I believe that binary objects shouldn't be transported between layers. Did you tried to convert image to Base64 src format? 

<div>
<p>Taken from wikpedia</p>
<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
</div>

You could use this method:

encoded_image = base64.b64encode(profile_picture).decode()
encoded_image_str = "data:image/png;base64,{encoded_image}".format(encoded_image=encoded_image)
Thiago Arthur
  • 11
  • 1