I know there are a lot of entries about how to use the staic files in Django and how to add them into html frame. I have searched 2 hours and tried every solution, but nothing worked for me!
I want to set the image as a background in a li-element. I tried all of the following:
<li style="background-image: url({% static \'images/start1.JPG\'});">
<li style="background-image: url('{% static “images/start1.JPG“}');">
<li style="background-image: url('{% static "images/start1.JPG"}');">
<li style="background-image: url('{% static \"images/start1.JPG\"}');">
<li style="background-image: '/static/images/start1.JPG';">
I'm probably just making a small misstake, but I cannot find it, I would really appreciate some help.
I tried loading the image in an img-element with:
<img src="{% static "images/start1.JPG" %}" alt="My image">
That worked, so the image is there at the right path.
Best,
Lennie.
The option with the " is interpreted into html like this:
style='background-image: url("{% static \"images/start1.JPG\"}");
Okay I found the error. I had the command {% load staticfiles %} in my base.html file.
And I was extending that template, but apparently I needed to put that command also in my index.html file.
Related
I am using Tailwind inside my Flask project. And I want to insert a background image using url_for() inside style. I have the usual static folder recommanded by flask and inside it I have an images folder and inside it my background images folder as shown in the code bellow. The problem is that the image don't show up.
<div class="w-1/2" style="background-image: {{ url_for('static', filename='images/background/bg1.jpg') }}">
This is the tree of folders
-|App
----|static
----|templates
--------------|Authentication
----------------------------|index.html
I tried url_for() to insert the image.
The issue is the proper formatting of css's background-image attribute. You need to put the link to the image into a special url('') format. In your case, you should be able to reference the image successfully with
<div class="w-1/2" style="background-image: url('{{ url_for('static', filename='images/background/bg1.jpg') }}')">
I have the following structure
my app/
|_my_app/
| |_templates/
|_static/
|_media/
|_utils/
|_main.py
|_manage.py
|_.gitignore
and having the in template.html
<img src="./media/image.png">
then it casts a GET 404 error Cannot find /media/image.png.
I have also tried relative path (relative to the template i.e <img src="../../media/image.png">.
Moving the media folder into static (and including {% load static %} I can do
<img src="{% static '/media/image.png'">
without any issues.
Why can't it find ./media/image.png in the first part?
Is there a way to do the "static" trick but with another tag (say media) e.g <img src="{% media 'image.png' "> to avoid absolute paths?
You can create a new folder named img in the static folder, then paste your image in the img folder such that the path to the image will be like this: static -> img -> image.png. You can load the image in HTML like this:
<img src="{% static 'img/image.png'">
I'm having trouble with displaying images with Django templates {%static%}.
<div class="slide" style="background: url({% static "images/header/header-1.jpg" %}) center center; background-size: cover;">
However, I am successfully able to display an image with tag
<img src={% static "images/logo.png" %} alt="Olga">
Thanks in advance
The way you use the {% static %} in inline styling is just fine. One suggestion (purely cosmetic is to use 'images/header/header-1.jpg' rather than " ").
Here are ways to debug.
clear browser history and try again.
if 1) does not work, open google chrome developer tool, and see if you have
GET ... 404(Not Found) error. If this is the case, it just means that your file path is wrong. Make sure that when you put
<img src={% static "images/header/header-1.jpg" %}>
in the SAME template file, the image shows up.
I am unable to load static files from inline-css in html file, which is present in the templates file in the django app.
For reference, the original file code is
<a class="portfolio-item" style="background-image: url(img/portfolio8.jpg);" href="">
I am trying to import portfolio8.jpg that is originaly present in the img folder in static files in django. I changed the code to:
<a class="portfolio-item" style="background-image: url({% static 'proj/img/portfolio8.jpg' %});" href="">
Doing this didnt work. It will be great if someone could help on how to load the img url from the style.
In order to load static files, first you may have to collect the static files with this command:
python manage.py collectstatic
And in the template, loading the static tag with:
{% load static from staticfiles %}
Don't pass image in the style tag. What that does is, it will set a background image for a text that is entered(which you are not passing). Try the below code, it should work for you.
<a class="portfolio-item" href="">
<img src="{% static 'proj/img/portfolio8.jpg' %}"/>
</a>
Thanks.
If you are using it in style area, try this
<a class="portfolio-item" style="background-image: url('static/proj/img/portfolio8.jpg');" href="">
I'm trying to put up a logo for the web page of one of our repositories. I managed to place the logo on the base html as that code is used throughout the whole site, it just calls the html fragments from the directory depending on what the user clicked in the navbar.
The problem: It displays correctly in the home page (dashboard) but when you click on the other navbar items the image converts to an icon that I usually see when an image fails to load.
this is the site: http://dir.coe.upd.edu.ph/
<div class="image" style="position:absolute; padding: 5px;">
<img src="../static/css/images/logo.png" class="responsive-image">
</div>
<div style="background-color:#d07837;height:300px;width:100%;position:absolute;z-index:-10;"> </div>
<div class="container" style="margin-top:50px;">
<div>
<h1 class="page-title">{% block page_title %}{% endblock page_title %}</h1>
<div class="row-fluid">
<div class="span12 well content-box">
{% block body %}{% endblock body %}
</div>
</div>
</div>
I'm still currently editing the site and I noticed this problem. the site was constructed though codeigniter and bootstrap
Your image is at the location http://dir.coe.upd.edu.ph/static/css/images/logo.png
so your src attribute of image tag should be
<img src="/static/css/images/logo.png" class="responsive-image">
The html are not at the same levels so your src attribute of the img tag is wrong.
This is what chrome devtools shows on the different pages.
logo.png /static/css/images
logo.png /works/static/css/images <-- There is no image in this
folder. It should be in /static/css/images
One of them is not found because they are different. Try use the absolute path or change the location of your template.
Solution change your image tag to
<img src="/static/css/images/logo.png" class="responsive-image">
Have a look on image...Hope this help