We Keep Coding

Flask can't find local static files even though they exist and the specified path is correct

I use render_template in conjunction with Flask to render an html file, index.html, which in turn references a CSS stylesheet, "templatemo-style.css". Within that css file, references are made to other local files like images and so on.
The folder structure looks like this:
/PARENT FOLDER
/templates
/index.html
/static
/assets
/images
/various files
Within the "assets" folder, there is sub folder called "css" which houses the css file.
The css file makes a call to the following url to grab the website's banner image:
background-image: url(../assets/images/main-banner.jpg);
The problem is, when I RUN the flask application, I get the following 404 error in my terminal:
127.0.0.1 - - [02/Aug/2021 13:13:51] "GET /static/images/main-banner.jpg HTTP/1.1" 404 -
For some reason, the application isn't calling the path that I specified in the code. I've searched all over the code in various different files for the place where this mysterious call is made and I can't find it anywhere. Even if I comment out my "background-image:" line above, I still get the same error. I should note that for the front-end i'm using a css/bootstrap template that I found online and then modified to my liking. I've searched the js code as well and that call isn't made there either.
I'm completely stumped and have no idea where this mystery call is coming from. Anybody have any possible ideas? Thanks
EDIT: figured it out. Its because my browser was caching my css file and therefore not running updated code.

Maybe this would work
background-image: src="{{ url_for('static', filename='filename') }}"

Updating an image on the web using Python and Flask

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

Django doesn't show the CSS of my template

The problem is described in title. I have this template for a blog that I'm creating using Django.
When I open it normally, using double click over the HTML file, it looks like this:
But when I open it via url from the Django project, it looks like this
It only shows a green square (part of the css) but obviously can't open the css correctly.
Any idea to solve this?

In Django you don't open the HTML with double click on the file, you need to run the server first and open your site using the localhost (like you did in the second picture).
Judging by those images, are you sure you put the image in the static folder? In Django, the HTML files stays in the "templates" folder of your app and the css, javascript and images in the "static" folder.
If this answer doesn't help you, then you should post your code here, otherwise I can't find the problem.

Flask-Images is not working

I installed Flask-Images to dynamically resize images according to the doco here: https://mikeboers.github.io/Flask-Images/
My code is like this:
Jinja
<img src="{{ resized_img_src(filename, width=200) }}"/>
And in views.py
#app.route("/uploads/<filename>", methods=["GET"])
def uploaded_file(filename):
return send_from_directory(upload_path(), filename)
The images do not change size even though I can see that the modified url is being returned on dev tools:
<img src="/uploads/69?w=200&s=4tDuOKq1G1qURVty_6pYAxpG4jk">
I know something similar was asked here a while ago Flask-Images does not work
but the only answer there wasn't helpful.
I've been at this for 2 days now. If anyone has experience incorporating Flask-Images into their project, I'd appreciate any suggestions. Would people recommend using Flask-Resize instead? https://github.com/jmagnusson/Flask-Resize.

The Issue
The problem with your current setup is that Flask-Images can't find the image file 69.
If you run your Flask application in debug mode, you would see the following 404 occur when you entered the URL with the image to be resized in it.
127.0.0.1 - - [04/Jul/2015 17:09:50] "GET /imgsizer/uploads/beastie.png?w=200&s=3mNDiQA6kRKps70a7xBi0BywF2w HTTP/1.1" 404 -
Solution
For flask-images to be able to load the resource, we need to put it somewhere accessible, that would be the 'static' directory by default in Flask
The solution as stated above would be to either move the images into the static directory, you can also override the directory path in the app definition, or in a setting
app = Flask(static_folder='some_other_path_with_images')
app.config['STATIC_FOLDER'] = 'or_this_other_directory'
After fixing this, you can also check the app debug console and see the requests are going through just fine
127.0.0.1 - - [04/Jul/2015 17:18:47] "GET /imgsizer/beastie.png?v=VZfrJw&w=100&s=2_gsJZCVk-gvUm4VD-OD6ZuXjbY HTTP/1.1" 200 -
Source Code
Feel free to take a look at the model i set up to check this out, the solution for this problem can be found here on github.

Flask does not load CSS file..?

So the problem I'm having is that my web app only sometimes loads the css file and it uses the same css file data that was loaded even if I make edits to the css file and even when I delete the file. I have no clue what's going on. I have noticed that when it does load the css correctly the following message is displayed:
127.0.0.1 - - [08/Jun/2015 14:46:19] "GET /static/style.css HTTP/1.1" 200
My style.css file is under a folder named static and in my html file I have
<link type='text/css' href='{{ url_for('static', filename='style.css') }}' rel='stylesheet'>

Flask sets cache control headers on static resources, and your browser will cache those files up to 12 hours.
Your options are:
Set the SEND_FILE_MAX_AGE_DEFAULT configuration directive to a shorter value; it is set to 43200 but you can set it to 0 if you really want to.
Add a cache buster query parameter to your static URLs; if your static URLs end with ?<somerandomvalue> your browser will reload the resource if that random value ever changes. You could do this by hand each time or you can use this Flask snippet to override the url_for() function to add such a value for you based on the file modification time.
Use an incognito browser window (private browsing mode in other browsers) to force your browser to ignore the cache for a specific session. Each time you open a new incognito tab or window, the cache should be invalidated for that session.

Please use ctrl + f5
because when you use simple refresh it shows data from cache but when you do ctrl + f5 it render new data

I guess it's because of the fact that your browser catches CSS files. In fact, there is no way for browser to detect your changes unless you refresh your page manually by pressing Ctrl+F5 and force browser to flush the resources.
Update 1:
The only One way to fix this is to add a randomly generated suffix to your CSS/JavaScript files and change those values whenever you make a change to your files. This way, the browser catches the latest CSS file and ignores the previous files.

Ctrl+Shift+R to refresh the page works well.