-1

I've tried every single possible approach, where both my image file and html file are located within the same directory, as so:

       project
          |
      templates
       |     |          
image.jpg profile.html

It is not a capitalization or misspelling issue, both the names are the same.

It is not an absolute or relative path issue, as I've tried: <img src="./image.jpg"> and
<img src="/image.jpg"> and
<img src="http://localhost/project/templates/image.jpg"> and any combination thereof.

When using the localhost source path, the image attempts to load on the website, where there is a blank space, and only after several seconds does it display the image not found icon. In the case of using relative paths without localhost, the image not found icon displays immediately.

I've tried to use absolute paths as well, which also did not work.

I've looked through 30 different SO threads so far, and have not found a single solution that works. Does anyone know what I could possibly do in order to fix this?

I'm speculating that it has something to do with permissions or possibly the settings of something I'm using.

  • PyCharm - Python 3.9
  • Flask
  • HTML and CSS

Please let me know if you need any additional information at all from me, thank you in advance!

Misha Golikov
  • 1
  • 1
  • You are writing "local image file". If that means, the image is on the client machine and not on your server, then it can never work, because your code is running on the server and does not have any access to the users machine. – Wilhelm Mar 15 '22 at 11:44
  • How can I allow it to have access to the image, do you have any suggestions? – Misha Golikov Mar 15 '22 at 19:17
  • I think that now browser should allow to open a file from a local disk. If that would be possible, then a bad programm can save a virus to tempfolder and then run it. Based on hat links: You can do it with javascript - but I doubt. https://stackoverflow.com/questions/42498717/how-to-read-image-file-using-plain-javascript And here is another one: https://stackoverflow.com/questions/3582671/how-to-open-a-local-disk-file-with-javascript – Wilhelm Mar 16 '22 at 11:20

1 Answers1

-1

The static folder contains assets used by the templates, including CSS files, JavaScript files, and images.

The templates folder contains only templates. These have an .html extension.

http://localhost/static/image/home.jpg

my-flask-app
   ├── static/
   │   └── css/
   │       └── main.css
   │   └── img/
   │       └── home.jpg
   ├── templates/
   │   ├── index.html
   │   └── student.html
   ├── data.py
   └── students.py

Flask Docs

Example

Rimander
  • 131
  • 1
  • 11
  • This unfortunately did not work, I managed to do the same exact directory structure as this, but my image still does not appear, should I be setting some sort of parameters or app settings in code? – Misha Golikov Mar 15 '22 at 19:14
  • You should not, Flask is configured to load data from these directories. check the other post: https://stackoverflow.com/questions/20646822/how-to-serve-static-files-in-flask – Rimander Mar 16 '22 at 10:07