I am making a project in django. I am able to implement html pages but not able to show images from that page.
<img src= "home/ashish/PycharmProjects/django/webapp/family/static/images/error-img.png" />
it is showing error as
Resource interpreted as Image but transferred with MIME type text/html
when I hit the url,Request URL:http://127.0.0.1:8002/home/ashish/PycharmProjects/django_webapp/family/static/images/error-img.png
While if i make a src to online image it works fine.
setting.py
STATIC_URL = '/static/' # You may find this is already defined as such.
STATICFILES_DIRS = (
STATIC_PATH,)
MEDIA_URL = '/media/'
And all the images are inside app/static/images.
Thanks
You have not defined static file URLconf in your urls.py file. You can define them for development server use, like this:
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
...
urlpatterns += staticfiles_urlpatterns()
And then you can view your static files at:
http://127.0.0.1:8002/static/images/error-img.png
See: Django docs on Managing static files
Related
I was having some difficulties rendering my static data through the css background-image tag.
For example, take the following piece of code:
<section class="banner-area" style="background-image: url('../../static/main/img/search4.jpg')>;
When I inspect the element on my browser, I can see that it is not being linked to AWS S3 bucket, and the url remains exactly the same as per the following:
url('../../static/main/img/search4.jpg')
However if I render an image using the source tag, I get the behaviour I want, for example:
<img src="{% static 'main/img/search4.jpg' %}/>
Here, when inspecting the element, I can see in the browser that it is being linked to my S3 Bucket as per the following:
src="https://mybucket-bucket.s3.amazonaws.com/main/img/search4.jpg?ETC...."
In my settings.py
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "main/static"),
)
MEDIA_ROOT = os.path.join(BASE_DIR, 'static/img')
MEDIA_URL = "/media/"
DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
STATICFILES_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
STATIC_URL='https://mybucket-bucket.s3.us-east-2.amazonaws.com/'
Can you please advise ?
Kind regards,
Marvin
Try changing
url('../../static/main/img/search4.jpg')
to
url('{% static 'main/img/search4.jpg' %}')
The reason for this is your site is hosted on a domain different from your s3 bucket domain so the browser is unable to resolve the relative url
For example, if your website is at example.com the browser attempts to pop off the last 2 path components(parts of the url following a forward slash e.g /component1/component2/) so it just does nothing. You can place the relative path in your css file since it's hosted on the same domain as your image
I have used static for all the js/css/images path. However, click on the logo redirects me to http://127.0.0.1:8000/static/index.html without any css/js/images. The same works well all other paths in the page(eg: http://127.0.0.1:8000/static/about.html)
Sharing my urls.py:
from django.urls import path
from . import views
urlpatterns = [
path('', views.index, name='index')
]
views.py
from django.shortcuts import render
from django.http import HttpResponse
def index(request):
return render(request, "index.html")
Please help
Screenshot here
Websites generally need to serve additional files such as images,
JavaScript, or CSS. In Django, we refer to these files as “static
files”.
NOTE: html files are not included, so don't use {% static %} with html files.
To jump to other pages, you have to use {% url %} tag with the name of the view, for example {% url 'index' %} or simply use a relative path Home, that's good to go.
For css/js files are not loading, you may have the wrong settings, follow the instructions here step by step, and remember to {% load static %} in the top of your template
I have a problem with my project.
I'm working on a university project based on Django and in fact we don't know HTML, CSS at all.
I have a small hierarchy of catalogs:
-> Project
-> LibProject
-> templates
-> LibProject
-> main.html
-> images
-> logo.png
There LibProject and images are in the same level.
I would like to add a logo.png via inside main.html file.
I've tried to get 3 directories up and then go to images/logo.png but it doesn't work.
PS: It has to be static image.
May you give me any sollution for this? Thanks in advance!
you should do some settings to before that :
add
STATIC_URL = '/static/'
to your settings.py
add
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),#this is your static files dir
]
to your settings.py
in your url.py file you should add this:
urlpatterns = ["""your urls"""] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
for more details please read django doc :
https://docs.djangoproject.com/en/2.2/howto/static-files/
I'm making Django app in which I need to embed many external HTML files in the template. Each HTML file is stored in its own directory, along with the subdirectory that contains all the images. The file structure:
Abstract1
Pictures
image1.png
image2.png
abstract1.html
I use a custom template tag for embedding (see below). My problem: the HTML files are loaded, but linked resources (e.g. img) are not working properly (i.e. they're not being displayed). HTML files use relative urls, which, mixed with the django template base path produce invalid url, but even if I use hardcoded absolute urls the problem remains. I feel like I'm missing something obvious. Is there some proper (or not proper but working) way to overcome such problem?
template
{% load abstracts_extras %}
<!DOCTYPE html>
<html>
<body style="margin-left:10px">
<h2>{{abstract}}</h2>
<b>Authors:</b><br/>
<ul>
{% for author in authors %}
<li>{{author}}</li>
{% endfor %}
</ul>
<p>
<b>Title: </b>{{abstract.title}}
<p>
<hr>
{% include_external filename|add:'.html' %}
</body>
</html>
abstracts_extras
from django.template import Library
register = Library()
def include_external (url):
url = 'file:///' + url
import urllib2
return urllib2.urlopen (url).read ()
If I am understanding well, your templates load but not statics like img.
It would be a configuration error.
You should check both settings.py for Django and httpd.conf for Apache and check staticfiles are properly configured.
Have you any error shown or just images are not loaded (but no error)?
I've been looking around everywhere and trying everything but i cannot seem te get my css file to work in a Django template.
My css i called style.css
the code in the template right now looks like:
{% load staticfiles %}
<link rel="stylesheet" href="{{ STATIC_URL }}style.css" type="text/css" media="screen" />
I'm still working on the development server.
In settings py I added:
STATICFILES_DIRS = (
"home/henk-jan/website/Template/Database")
django.contrib.staticfiles is installed in Installed_apps
can anyone help me with this?
Cheers, Henkes
Edit: My template (index.html) is in the same folder as my style.css the folder is: /home/henk-jan/website/Template/Database
From looking at your original post it would appear to me that your working at rendering your page from two separate angles.
First, you have {% load staticfiles %} which will load the templatetags associated with the staticfiles module. Second, inside your link element you are referencing {{ STATIC_URL }} which gets expanded via context.
From this I would recommend one of the following two courses of action.
1 - Utilize the staticfiles module and the templatetags you loaded in your template.
To do this you should modify your link element to read like this:
<link rel="stylesheet" href="{% static "style.css" %}" type="text/css" media="screen" />
Note that in this instance I have replaced the {{ STATIC_URL }} with the {% static %} templatetag. The {% static %} templatetag takes an argument which is the file you wish to prefix with the static URL, and expands into the complete string.
2 - Make use of context by modifying your view to render with context.
The {{ STATIC_URL }} variable is made available via request context. There are a number of useful variables that are, that you can rely on to get expanded if you want to utilize them. The trouble is that you have to ensure that you render your template with context which means you would potentially have to change one or more views.
As an example an overly simple view that renders without context would look like:
from django.shortcuts import render_to_response
def index_without_context(request):
return render_to_response("index.html")
While the same overly simple view rendered with context would look like this:
from django.shortcuts import render_to_response
from django.templates import RequestContext
def index_with_context(request):
return render_to_response("index.html",
context_instance=RequestContext(request))
As I stated above, by rendering your template with a RequestContext you get other variables and such that can be of use so it is a very viable option.
In the end it really depends on where you want to keep the logic that ensures your static files get your static URL rendered correctly at. If you want that logic inside the template itself I would recommend you go with the {% load staticfiles %} approach and use the {% static %} template tag. If you prefer to make use of the {{ STATIC_URL }} variable as well as having other potentially useful variables available then I would recommend modifying your view to be rendered with a RequestContext.
You can read more about the difference between using the context processor or a template tag in the Django docs section about this very topic:
https://docs.djangoproject.com/en/1.4/howto/static-files/#referring-to-static-files-in-templates
Is "home/henk-jan/website/Template/Database" a valid location? Maybe "/home/henk-jan/website/Template/Database" instead? Right now the preceding forward slash is missing.
If you are working on the development server, you will want to let Django serve the static content. When you go to production you will have your web server handle serving static content instead.
You will want STATIC_URL pointing to the path to your static content (in this case it looks like that would be /Template/Database/. It sounds like you have that working. Now you just need to tell Django to serve static content when in DEBUG mode. See this post: Django MEDIA_URL and MEDIA_ROOT