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="">
Related
On a flask site, link to download pdf is provided on the page.
When i run the site by main.py i get the file doesn't exist error as given under,
but it works fine when i run only index.html file
the error
in main.py
class ThePage(MethodView):
def get(self):
form = InfoForm()
return render_template("index.html")
in index.html
<a href="../1668671114.892154.pdf" download>
<div class="btn-block2">
<span class="hazir">✅</span> <span style="font-size: 20px">PDF ready, click.</span>
</div>
</a>
Problem may be related to render_template part where i should add some arguments, though i couldn't figure out how to.
I think you are using a relative path to the templates directory. The server cannot resolve this URL. Use the static folder to deliver static files.
Move the pdf file to a folder called static within your application's root directory.
Inside the anchor tag use url_for('static', filename='1668671114.892154.pdf')
<a href="{{ url_for('static', filename='1668671114.892154.pdf') }}" download>
<div class="btn-block2">
<span class="hazir">✅</span> <span style="font-size: 20px">PDF ready, click.</span>
</div>
</a>
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 trying to add an image to an HTML page by passing the name of the .jpg file to an html jinja template from a view. The image is located in a static folder, and will appear as desired if the file name is coded directly, but not when I try to pass it in through Jinja.
Django view code:
def page(request):
location = '''src="{% static 'image.jpg' %}"'''
return(render(request, 'page.html', {'location':location})
Code on HTML page:
{% load static %}
<img {{location}} alt="image">
The image file is located in a static folder at the root of the Django project
I've also tried other combinations of string to be passed in and HTML including:
location = '''"{% static 'image.jpg' %}"'''
<img src={{location}} alt="image">
location = "'image.jpg'"
<img src= "{% static {{location}} %}" alt="image">
When I code the file name in directly as follows:
<img src= "{% static "image.jpg" %}" alt="image">
the image is presented as desired.
I feel like there is something I'm misunderstanding, but I'm not sure what. I couldn't find another question asking how to do this when I searched, so please forgive me if you know of an answer I didn't find!
OK... so this works:
location = "\image.jpg"
<img src= "{% static location %}" alt="things">
That extra slash at the start of the location variable name was what was missing! Can't believe it was that simple.
I have put my image file img.png and HTML file index.html in the same folder test
I executed index.html in django, I wanted to display image from local
I tried
<img src='img.png'/>
<img src='./img.png'/>
<img src='..../test/img.png'/> <!-- absolute path -->
the system all says cannot find the image file.
1-Make sure that django.contrib.staticfiles is included in your INSTALLED_APPS.
2-In your settings file, define STATIC_URL, for example:
STATIC_URL = '/static/'
3-In your templates, use the static template tag to build the URL for the given relative path using the configured STATICFILES_STORAGE:
{% load static %}
<img src="{% static 'my_app/example.jpg' %}" alt="My image">
4-Store your static files in a folder called static in your app.
For example:
my_app/static/my_app/example.jpg.
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.