Das deutsche Python-Forum

Hallo,

Ich habe bei meinem Django Projekt das Problem, das keinerlei über "static" verlinkte Bilder angezeigt werden.
Expilizit handelt es sich im moment über das Favicon und ein Logo im PNG-Format.

Das merkwürdige ist, dass die styles.css Datei geladen und auch angewendet wird.
Das Favicon zeigt er gar nicht an und beim Logo nur das "alt".
Wenn ich über "127.0.0.1:8000/static/images/logo.png" versuche das Logo direkt anzeigen zu lassen, wird es auch problemlos angezeigt.

Ich habe zwar schon in der Django Dokumentation nachgeschaut und unter Google nach dem Fehler gesucht, aber leider keinen Hinweis gefunden, was konkret ich jetzt falsch mache ...

Hat jemand eine Idee?
Vermutlich ist es nur eine banale Kleinigkeit mit großen Auswirkungen, aber mir selbst gehen die Ideen aus, wo ich noch suchen bzw. was ich noch probieren soll. -.-

Grüße
Andreas

Anbei der Code:

base.html

Code: Alles auswählen

{% load static %}

<!doctype html>

<header>
    <meta charset="utf-8">
    
    <link rel="stylesheet" type="text/css" href="{% static 'style.css' %}">
    <link rel="shortcut icon" type="image/x-icon" href="{% static 'images/favicon.ico' %}">
    <title>{% block title %}Hello World{% endblock %}</title>
    
    <img scr="{% static 'images/logo.png' %}" alt="logo">
    <h1>Hello World</h1>
</header>

<main style="disply: flex; min-height: 90vh; margin: 0 auto; flex-direction: column">
    {% block content %}{% endblock %}
</main>

<footer>
    <a href="/index.html">Startseite</a>
    &nbsp&nbsp&nbsp&nbsp&nbsp
    <a href="/impressum.html">Impressum</a>
    &nbsp&nbsp&nbsp&nbsp&nbsp
    <a href="/datenschutzbestimmungen.html">Datenschutzbestimmungen</a>
</footer>
</html>

urls.py

Code: Alles auswählen

from django.contrib import admin
from django.urls import path

from helloworld import views

from django.conf import settings
from django.conf.urls.static import static


urlpatterns = [
    path('admin/', admin.site.urls),
    
    path('', views.index, name='index'),
    path('index.html', views.index, name='index'),
    path('impressum.html', views.impressum, name='impressum'),
    path('datenschutzbestimmungen.html', views.datenschutzbestimmungen, name='datenschutzbestimmungen'),
    
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

settings.py

Code: Alles auswählen

SITE_ROOT = os.path.normpath(os.path.dirname(__file__))
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

INSTALLED_APPS = [
    ...
    'django.contrib.staticfiles',
    'helloworld',
]

STATIC_ROOT = os.path.join(SITE_ROOT, 'static')
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
STATICFILES_FINDERS = (
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
)

@Andreas P.: Grundsätzlich ist Dein HTML ein bisschen kaputt. Du hast kein <head> und kein <body>, in dem <header> stehen Sachen die in <head> gehören, und <main> gibt es nicht in HTML.

Wenn ``127.0.0.1:8000/static/images/logo.png`` direkt funktioniert, wie sieht denn die URL im ausgelieferten HTML-Dokument aus?

Hallo blackjack,

Danke für die schnelle Antwort.

Die "HTML-Struktur" hatte ich mir bei selfhtml abgeschaut.
https://wiki.selfhtml.org/wiki/CSS/Tuto ... der_footer

Grundsätzlich muss ich zugeben, dass ich mit HTML auch ein bisschen auf Kriegsfuß stehe ... das wird aber hoffentlich noch.

(Die Sachen die bereits funktioniern zeige ich lieber nicht, sonst rennst du schreiend weg ...

)

Der ausgegebene HTML-Code sieht wie folgt aus:

Code: Alles auswählen

<!doctype html>

<header>
    <meta charset="utf-8">
    
    <link rel="stylesheet" type="text/css" href="/static/style.css">
    <link rel="shortcut icon" type="image/x-icon" href="/static/images/favicon.ico">
    <title>Hello World</title>
    
    <img scr="/static/images/logo.png" alt="logo">
    <h1>Hello World</h1>
</header>

<main style="disply: flex; min-height: 90vh; margin: 0 auto; flex-direction: column">
    
...

</main>

<footer>
    <a href="/index.html">Startseite</a>
    &nbsp&nbsp&nbsp&nbsp&nbsp
    <a href="/impressum.html">Impressum</a>
    &nbsp&nbsp&nbsp&nbsp&nbsp
    <a href="/datenschutzbestimmungen.html">Datenschutzbestimmungen</a>
</footer>
</html>

Grüße
Andreas

PS: Ich habe mir gerade noch die Anzeige von "runserver" angeschaut, weil das Favicon doch ausgegeben wurde.
Funktioniert irgendwie nur manchmal ...

[17/Sep/2018 11:43:39] "GET / HTTP/1.1" 200 1054
[17/Sep/2018 11:43:39] "GET /static/style.css HTTP/1.1" 200 171
Not Found: /favicon.ico
[17/Sep/2018 11:43:39] "GET /favicon.ico HTTP/1.1" 404 2916
[17/Sep/2018 11:43:39] "GET /static/images/favicon.ico HTTP/1.1" 200 120842
[17/Sep/2018 11:44:06] "GET / HTTP/1.1" 200 1054
Not Found: /favicon.ico
[17/Sep/2018 11:44:06] "GET /favicon.ico HTTP/1.1" 404 2916
Not Found: /favicon.ico
[17/Sep/2018 11:44:06] "GET /favicon.ico HTTP/1.1" 404 2916

Das was Du da geschrieben hast, steht bei SelfHTML aber anders. Da ist das in einem <body> und es ist dort auch nicht das ganze HTML abgebildet, sondern eben nur der <body>. Ein <main> gibt es dort auch nicht.

Das mit dem favicon funktioniert. Das der Browser auch das nicht vorhandene ``/favicon.ico`` probiert, hat nix mit Deinem HTML oder dem Django-Code zu tun. Das macht der doofe Browser von sich aus.

Hallo,

Grundsätzlich muss ich zugeben, dass ich mit HTML auch ein bisschen auf Kriegsfuß stehe ... das wird aber hoffentlich noch.

Dann lass' doch erstmal das ganze `header` `footer` Zeug weg, weil das erstmal nicht entscheidend ist. Wichtig ist der Doctype, die `html`, die `head` und die `body` Sektion. So wie hier gezeigt: https://wiki.selfhtml.org/wiki/HTML/Tut ... er%C3%BCst

Poste bitte auch mal deine Verzeichnisstruktur, also wie wo was abgelegt ist.

Gruß, noisefloor

Hallo,

Vielen Dank für den Link.
Habe das Ganze mal zusammengekürzt.
Das Bild wird leider immer noch nicht angezeigt.

base.html

Code: Alles auswählen

{% load static %}

<!doctype html>

<html lang="de">
<head>
    <meta charset="utf-8">
    
    <link rel="stylesheet" type="text/css" href="{% static 'style.css' %}">
    <link rel="shortcut icon" type="image/x-icon" href="{% static 'images/favicon.ico' %}">
    <title>{% block title %}Hello World{% endblock %}</title>
    
</head>

<body>
    
    <img scr="{% static 'images/logo.png' %}" alt="logo">

    Hello World

</body>

</html>

Verzeichnisstruktur

Code: Alles auswählen

MyDjangoProject
   settings.py
   ...
helloworld
   ...
static
   images
      favicon.ico
      logo.png
   style.css
templates
   base.html
   index.html
   ...
manage.py

urls.py und settings.py sind gleich geblieben.

Grüße
Andreas

PS: Ich hoffe die Verzeichnisstruktur wird erkenntlich, habe leider nicht rausgefunden, wie man hier im Forum so hübsche Verzeichnissbäume darstellen kann.

Hat niemand eine Idee, woran es noch liegen könnte?

@Andreas P.: Du hast ja die relevanten Logausgaben für das favicon gezeigt, wie sieht es denn beim Logo aus? Was sagen die Entwicklerwerkzeuge vom Browser beim Logo, also beispielsweise der „Network Monitor“-Tab bei Firefox?

Wenn ich die Seite aufrufe, kommt keine LogAusgabe bezüglich des Logo's:

Code: Alles auswählen

Quit the server with CTRL-BREAK.
[19/Sep/2018 14:55:00] "GET / HTTP/1.1" 200 687
[19/Sep/2018 14:55:00] "GET /static/style.css HTTP/1.1" 200 171

Firefox-Netzwerk-Monitor:
Gibt 2 Meldungen für die Dateien aus:

Status "200" Methode "GET" Datei "/" Host "127.0.0.1:8000"
Status "200" Methode "GET" Datei "style.css" Host "127.0.0.1:8000"

Rufe ich das Logo direkt über "127.0.0.1:8000/static/images/logo.png" auf, kommt folgende LogAusgabe:

Code: Alles auswählen

[19/Sep/2018 14:55:19] "GET /static/images/logo.png HTTP/1.1" 304 0

Der Netzwerk-Monitor gibt mir die Ausgabe:
Status "200" Methode "GET" Datei "logo.png" Host "127.0.0.1:8000"

Welche Informationen wären für euch diesbezüglich da noch wichtig bzw. von Interesse?

Grüße
Andreas

@Andreas P.: Manchmal ist man blind.

Schau Dir mal an wie das Attribut beim <img> heissen muss und wie Du es statt dessen genannt hast. Klassischer Fipptehler.

__blackjack__ hat geschrieben: ↑Mittwoch 19. September 2018, 14:19 @Andreas P.: Manchmal ist man blind. Schau Dir mal an wie das Attribut beim <img> heissen muss und wie Du es statt dessen genannt hast. Klassischer Fipptehler.

AAAAHHHHHHH .... *Tisch* .... *Kopf* ....

Danke!
Jetzt gehts. Zig mal falsch ein- und abgetippt.

PS: Kann ich das Thema irgendwo auf erledigt setzen?

Das deutsche Python-Forum

Bilder in Django werden nicht angezeigt

Bilder in Django werden nicht angezeigt

Re: Bilder in Django werden nicht angezeigt

Re: Bilder in Django werden nicht angezeigt

Re: Bilder in Django werden nicht angezeigt

Re: Bilder in Django werden nicht angezeigt

Re: Bilder in Django werden nicht angezeigt

Re: Bilder in Django werden nicht angezeigt

Re: Bilder in Django werden nicht angezeigt

Re: Bilder in Django werden nicht angezeigt

Re: Bilder in Django werden nicht angezeigt

Re: Bilder in Django werden nicht angezeigt

Re: Bilder in Django werden nicht angezeigt