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
Related
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"/>
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.
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.
I am using flask and Jinja templates. None of my CSS is being applied, except for bootstrap which is being downloaded from an external host.
Here is the line in my base template for my own stylesheet:
<link rel=”stylesheet” type=”text/css” href="{{ url_for('static', filename='style/stylesheet.css') }}">
And then when I open the page in chrome I can follow the link, and it opens up the file successfully. However when I look in the frames I cannot see my stylesheet under the stylesheets section:
Here is the request from the server: GET /static/style/stylesheet.css HTTP/1.1" 200 -
It looks likes it's not being recognized as a css file ? I'm not great with web stuff so hopefully this is something simple.
I have no idea what was happening here. This issue has been ongoing for days.
To fix it I simply copied the line that loads the CSS, saved my project, pasted it back in, and ran the server. Mass confusion.
For anyone else still having issues with this I found this that suggests the CSS is not being "hard refreshed".
I fixed this issue on my Mac in Chrome by holding down both ⌘ Cmd+⇧ Shift and pressing R.
I am trying to use ckeditor in a web project I am currently developing.
The problem is that when I try to instantiate the Ckeditor (either via the jQuery adapter or with the CKEDITOR.replace command), the editor is created but it is hidden.
I inspected the source code and for some reason it has this css attribute
.cke_skin_kama {
visibility: hidden;
}
Then I checked the css files that it uses and I noticed that the editor.css file has no css rule in it! It's completely empty, although it points to the correct url.
Do you know why this is happening? Any hint would be more than welcome!
Thanks in advance!
UPDATE: I tried to use Tinymce also, but I have the same problem. The file ui.css is empty too.
I am using python-webapp2 for GAE. Could this have any relation to the problem? Any specific configuration I have to do?
Thanks!
The problem probably lies in the declaration of your static files directories. Try to move ckeditor outside the paths of your existing static files. For example add the following in your app.yaml, and of course place the ckeditor in the respective folder:
- url: /ckeditor
static_dir: static/ckeditor
if you want create chkeditor into your page you can use this code after attaching chkeditor javascript file :
<textarea id='chkeditor2' class='ckeditor' name='editor1'></textarea>
class and name is defined into javascript file and this text area will chkeditor panel. sorry for bad english :) i hope this will helpfull for you :)