How can I display and download an image which is located outside of the static folder?

I'm setting up a script and I want to display an image which is located outside of my static folder. My project is designed like this:

___folder
  |__ image.png
  |__ text.txt
___web
  |__static
    |__ css
    |__ js
  |__ app.py

At the moment, I just run my script app.py. I have managed to create a hyperlink to download my image from another folder using the file protocol with this:

<a href="file://///{{ image_path }}">Download </a><br>

This way works but I'm forced to right click on the hyperlink and paste it in a new window in order to download it. I'm looking for a way to just left click on it.

After that, I've tried to display this same image with:

<img src="file://///{{ image_path }}" style="width:100%;" alt="Image not found">

but it actually doesn't work even if the path works for the previous part.

I've obtained some errors, when I've inspected the page as:

Failed to load resource: the server responded with a status of 404 (NOT FOUND)

UPDATE 1

Is there a way to solve my issue by using mimetype here?

Any help or direction is highly appreciated. Thank you.

Solution

https://www.w3schools.com/tags/att_a_download.asp Simply add the download attribute to your <a> tag, e.g.,

<a href="file://///{{ image_path }}" download="filename.png">

The ="filename.png" is optional, you can just have download with no paramaters.