Why HTML file is displaying old image if I replace the file with same old name in directory?

Question

I'm creating webapp by using Flask on backend and HTML, CSS, Bootstrap 4 on frontend and havenot using a single line of code of javascript. My flask app code is:

from flask import Flask, render_template
app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(debug=True)

But, the issue is when I add an image in HTML code it works completely fine. But if I replace the file in directory with same name but when I preview it in browser while coding it shows the old picture. I'm using Bootstrp 4.6

The image code inside a simple div is:

<img class="img-fluid" src="/static/about.svg" alt="Students">

Answer 1

That because of your local browser cache (see in the network panel of our browser dev tools : image requests don't have a 200 http status code). You should want to disable it during development.

But you must handle it in production too, with plugins like Flask-caching or with cache control mecanisms.

Answer 2

In a youtube tutorial, I get to know that by refreshing page while pressing "Ctrl-key" clears the cache. And it worked for me.