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
Related
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.
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!!!!
I'm having an issue where I can't load images from anywhere but my media folder.
For example:
<img src="media/image.png" />
will load just fine
however if i move the "image.png" file 1 more folder deeper to:
<img src="media/folder/image.png" />
"image.png" will not load.
Does anyone have any ideas as to why this is happening?
You need to use django staticfiles module. 'Static' figures out where your files are placed and redirects all requests to this folder
Assuming that your image.png is located in you/yourapp/static/media/folder the following should do.
{% load static %}
<img src="{% static 'media/folder/image.png' %}" />
Read the docs about serving static files with django.
If not in production then perhaps this would be helpful: https://stackoverflow.com/a/52672594/1953366
It worked for me. You can use "/" for PATH to directly map the files. Folder hierarchy is not exposed though.
I am trying to learn django by reading the tutorial and Django book on the net.
I am trying to display a web page on a url.
For the same I wrote in the url pattern function the statement (r'^home/$' , home ) where I have imported the home function.
Also in the home function I wrote
def home( request ):
return render_to_response("home.html",None) // home.html is placed in the templates folder along with its .css
This must be wrong as I don't intend to pass any response ... so please tell what i should write here...
However the issue I am facing is that when I go to the url the html comes in plain without the css styling without the color etc.....
When I check my html template however that is fine ...
So what do I need to do to display the html as it is in the url ???
Thanks..
You need to put the .css in the STATIC_FILES directory (if you are using 1.3 or MEDIA_URL for 1.2)
http://docs.djangoproject.com/en/dev/howto/static-files/
Then you need to link to the css in the head of the html file with something like:
<head>
{% load static %}
<link rel="stylesheet" href="{% get_static_prefix %}html.css" />
</head>
I assume you are using the development server.
Make sure that your URLconf is correct:
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
urlpatterns += staticfiles_urlpatterns()
See: http://docs.djangoproject.com/en/dev/howto/static-files/#serving-static-files-in-development
Then your css files can be included like this:
{% load static %}
{% get_static_prefix as STATIC_PREFIX %}
<head>
<link rel="stylesheet" href="{{ STATIC_PREFIX }}/yourpath/your.css" />
</head>
Off course the css files have to be located in your static_media dir.
This means, as stated in the docs, that you should set STATIC_ROOT to the appropriate folder, for example a folder named 'static_media' in your project directory.