I have placed the image links in the templates, but no images appear, what can I do?
the styles are applied as they should be, but it’s just the images that don’t appear
{% load static %}
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Pizza Mama</title>
<link rel="stylesheet" href="{% static 'main/style.css' %}">
</head>
<body>
<div class="centered">
<img src="{% static 'main/images/main_logo.png' %}">
<a href="{% url 'menu:index' %}">Voir le menu</a>
</div>
</body>
</html>
You would need to post the model, view, and template involved in this. Also, are these images static files or files that have been uploaded?
When posting code on this site, enclose each block of code between lines of three backtick - ` characters. You’ll have a line of ```, then your code, then another line of ```. This forces the forum software to keep your code (or template) properly formatted. Make sure you use the backtick - ` and not the apostrophe - ', and make sure the lines of ``` are lines by themselves.
alright
here is the code
{% load static %}
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Pizza Mama</title>
<link rel="stylesheet" href="{% static 'main/style.css' %}">
</head>
<body>
<div class="centered">
<img src="{% static 'main/images/main_logo.png' %}">
<a href="{% url 'menu:index' %}">Voir le menu</a>
</div>
</body>
</html>
style
body {
background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)) url(images/main_background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover ;
background-size: cover;
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
color: white;
}
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
a {
display: block;
text-align: center;
color: red;
margin-top: 30px;
font-size: 18px;
}```
View
from django.shortcuts import render
Create your views here.
def index(request):
return render(request, 'main/index.html')
What does your project directory structure look like? (Where are these images located relative to your project base directory?)
Are you seeing the request for the image in your console log?
Are you getting a 404 code in your console log when the browser is requesting these files?
What is your STATICFILES_DIRS setting?
Do you have STATICFILES_FINDERS defined? If so, what is it? (It’s not required for you to have this, the defaults are usually adequate.)
it should appear like that
But that’s what I have, back ground image and logo image doesn’t appear
I don’t have 404 code but here is what I have
a blank page without all images
What are you getting in the console log for the image retrieval?
If you’re getting a 200, then this isn’t a Django issue - this would be either an HTML or CSS issue.
(Side note: The screen captures of your directory structure is illegible. I can’t tell what directory those files are in. But, it’s probably not important because it’s beginning to look like this isn’t a Django issue.)
yes in th console I have 200
I don’t see where it’s trying to access the image file at all - I see the two entries for the css file, but none for the image. So no, you don’t have a 200 for the image - you don’t show any reference at all.
Is the template you’re showing here the file named ‘index.html’? (The one you’re rendering in your view)
Examine what your browser has received as html in your browser’s developer tools. Do you see the img tag above your a tag? If so, what is the src attribute in that tag?
(Side note: Please do not post images except when absolutely necessary (like your desired screen shots above. I could just barely read this one, and if I didn’t know exactly what I was looking for, this wouldn’t have done me any good. In the future, for console logs, etc, please copy / paste the text of the information into your message.)
1 Like
How About Your StaticFiles Config in Settings.py inside your Project.
and did you update Static Files With this Command python manage.py collectstatic before running the server.
please provide STATICFILES configurations.
