How do I load images in debug=False for testing purposes? Below is my code for your reference.
<img src="/static/b_icon.png" alt="Brand Icon" width="30" height="30" class="d-inline-block align-text-top">
This is wrong:
<img src="/static/b_icon.png"
This is right:
{% load static %}
<img src="{% static 'b_icon.png' %}
Just take a moment to read carefully Managing static files, Serving static files during development docs and follow all steps.
Related
I am trying to show few images on my website, I've collected the sources of all of them in a list. In html file I've created a loop to iterate through each of them.
HTML body :
<body>
<div class="content">
{% for output in outputs %}
<h1> {{ output }} </h1>
<img src="{% static '{{output}}' %}" alt="Mountains" style="width:100%">
<img src="{% static 'images/1.jpg' %}" alt="Mountains" style="width:100%">
{% endfor %}
</div>
</body>
So, the thing is - I am able to show image "1.jpg" from "images" directory (so the problem is not due to static files). I've also checked that "output" has the right content. This is the output of my code :
enter image description here
And this is directory where I store my images :
enter image description here
please, let me know if you have any idea what should i do next. Any advise will be helpful.
That's what worked for me, thanks to Abdul Aziz Barkat!
"Use {% static output %} not {% static '{{output}}' %} if you inspect the html you would see something like src="/static/{{output}}" for what you wrote.."
This is how I've referenced it.
{% load static %}
<link href="{% static 'Assets/img/globe.png' %}" rel="icon" />
I used a .jpg image and it’s now showing up. Still don’t know why a .png image is not working my head tag because they’re working in the body tag
I made a carousel orderable. each instance has an image and char field for the webp file name through the picture element. The webp image loads perfect when I hard code the srcset instead of using a {{variable}}.
Problem is that keeps the admin backend from being dynamic and leaves me hard coding every pic on the site or just the pages I want to rank for on google. Ive read a bunch of other posts but im still stuck. is there any way to serve webp filename cleanly from the backend?
I have read.
load static file with variable name in django
django 1.5 - How to use variables inside static tag
This one was the closest to solving my problem but falls short.
https://snakeycode.wordpress.com/2015/02/20/variables-in-django-static-tags/
carousel orderable fields
carousel_image = models.ForeignKey("wagtailimages.Image", on_delete=models.SET_NULL,related_name="+",)
webp = models.CharField(max_length=100, blank=True, null=True)
home template carousel
{% for loop_cycle in self.carousel_images.all %}
{% image loop_cycle.carousel_image max-750x500 as img %}
<picture>
<source srcset="{% static '{{loop_cycle.webp}}'%}" type="image/webp" >
<img src="{% static '{{img.url}}'%}" alt="{{ img.alt }}">
</picture>
As this works perfect when I hard code but then whats the point of having a carousel with an orderable that is next-gen image friendly? Thank you for reading Im going CRAZY?
<picture>
<source srcset="{% static '{{loop_cycle.webp}}'%}" type="image/webp" >
<img src="{% static '{{img.url}}'%}" alt="{{ img.alt }}">
</picture>
As this works perfect when I hard code but then whats the point of having a carousel with an orderable that is next-gen image friendly? Thank you for reading Im going CRAZY?
ok so did some fiddleing and figured it out here is the working code.
<picture>
<source srcset="{% static 'webp/'|add:loop_cycle.webp|add:'.webp' %}" type="image/webp" >
<img src="{% static 'webp/'|add:loop_cycle.webp|add:'.webp' %}" alt="{{ img.alt }}">
</picture>
im sooooo happy!!!!
So with flask I know that I can add CSS with
<link ... href="{{ url_for('static', filename='stylesheets/style.css') }}" />
but if I am adding a google font which usually in HTML looks like
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
what do I need to edit/add for it to work with Flask?
Add the google font link to your index.html or any page that you want like this:
{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% block styles %}
{{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename= 'mystyle.css') }}">
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
{% endblock %}
Then, add the CSS font statement to your custom CSS file (mine is static/mysyle.css) :
body {
font-family: 'Open Sans Condensed', sans-serif;`
}
You can't use static here like you would normally for a link to a resource on the webserver. Your link is still essentially static but not related to anything you are serving. So you either put the Google font link directly in the HTML template, or as a variable expanding to the full link (which would be convenient if you aren't using the same header template everywhere and may change the font later).
I am having a problem where when I try to run my website through the runserver command, it doesnt display any of the images.
(I am very new to django, and website building at all)
this is the html in the template:
< img src="../../../static/Website_header.png" width="800" height="200" alt=""/> (without the whitespace)
and this is the settings.py:
http://pastebin.com/KvdrF1L2
Edit: When I tried to click display image in new tab this was shown: http://imgur.com/EgXw4bw
You should not have direct links to your static files.
On top of your template:
{% load staticfiles %}
Your image tag:
<img src="{% static 'images/test.png' %}" />
"images/test.png" is addressed relative to your static folder:
static
------ images
------------ test.png