-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!

Improve this question
3
  • 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. Commented Mar 15, 2022 at 11:44
  • How can I allow it to have access to the image, do you have any suggestions? Commented Mar 15, 2022 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. stackoverflow.com/questions/42498717/… And here is another one: stackoverflow.com/questions/3582671/… Commented Mar 16, 2022 at 11:20

1 Answer 1

Reset to default
-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

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

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?
You should not, Flask is configured to load data from these directories. check the other post: stackoverflow.com/questions/20646822/…

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.