Hi so I'm trying to upload an png image that I saved in my static folder as a background in my little flask website. But I'm unable to do so. Each time I get a image icon (like it can't load it or something).
Here is the html code where I try to insert the png image.
<img src="{{ url_for('static', filename='bgcaf.png') }}" />
Here is the structure of my website folder (I'm trying to display the bgcaf.png in Cafinit.html).
[1]: https://i.stack.imgur.com/mEQL5.png
If I left out important info please let me know
url_for is a flask function it works in your py files but not on your templates,this would work just fine
<img src="static/bgcaf.png"/>
Related
I've been trying to upload an image in my webpage where i have multiple directories. I tried loading the image when the file was in the same directory as index.html. I tried loading the image when the file was in the directory templates and i even tried to make a directory images and upload it from there but nothing works. As you can see from the image, I copied the path and the relative path(i tried both) and put int "img src" but the image just won't load. The terminal says that it can't find the image due to a 404 error and gets me a link but when i click the yellow link I am able to see the picture. What else can i try?
codespace
try relocating your image where your html file is and changing the type of file
index.html resides in /templates and your relative path would lead to /templates/workspaces which obviously does not exist.
You can do something like
<img src="slika.jpg">
if the index.html and slika.jpg are in the same directory.
I have a basic question regarding Python and Flask for web development.
In my html template file, I have a line to display an image, shown as below:
<img width="600" height="451" src="static/graph_1.png">
The image is in the static folder. When I update this image but using the same name 'graph_1.png", the web still shows the old image, not the updated one. I think the browser somehow remembers the old image with the same name. But I didn't really want to change the name of the image. I learned it has something to do with "Catche-Control"? Please advice on how I can solve this problem. Thanks in advance!
User cmd+shft+r on mac or ctrl+shift+r on a pc to load the page without using cache.
off topic, but you might want to look into the flask documentation on templates. A better approach to adding the path to the html is using jinja to inject the path. The nice thing about this is if you ever change the file structure, as long as the file name remains the same you're golden!
<img width="600" height="451" src="{{ url_for('static', filename='graph_1.png' }}>
You can find more info here
I hitted a wall, i don't really understand why browser is not loading my images. the path is correct, i drag image in browser.
<div class="paveiksliukas">
<img src="file:///C:/Users/wanma/Desktop/html_images/wall.jpeg" >
<div></div>
</div>
and it opens OK, then i just copying address and placing it into my code, but it not loading. i would be grateful is someone could help me, i'm just a beginner.
I tried to do research on google, but nothing is helping, it loads from internet with .GIF tag, but it is not loading .JPEG from hard drive, not sure why because, the path seems to be OK.
Instead of using
file:///C:/Users/wanma/Desktop/html_images/wall.jpeg path.
Copy the image in same directory as html.
Then just name in img src tag like this:
<img src="wall.jpeg" >
your problem is propably only the /// before the path, code below works for me just fine
<div class="paveiksliukas">
<img src="file:C:\Users\Downloads/image.jpg" >
<div></div>
</div>
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:
Download <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.
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.
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.
I need to display some images and these image filepaths are outside of flask's static folder stored on on network folders.
<img src="{{ filepath }}"> # /some/external/network/folder/img.jpg
However this is not working and I get a broken image icon, however I can paste the image path into my browser and confirm its accessible. I need this application to be able to accept image sources from anywhere, so I can't update my static folder to the network folder. I also can't load the images to the server because there would be about 20,000+ photos.
Is there a way to get this to work?