CODEWITHSUNDEEP
pythonhtmlflaskflask-admin
Maitresage
Maitresage

Reputation: 81

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.

Upvotes: 2

Views: 641

Answers (2)

Bando
Bando

Reputation: 1302

This is a security exception built into Chrome. In the past you could override settings in Chrome like this. Check other topic in Stack, I can link dozens where you can find by yourself some help. You could use an intermediary page that serves the network based files for example.

You can find some help here.

Upvotes: 0

clubby789
clubby789

Reputation: 2713

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.

Upvotes: 1

Related Questions