Я пытаюсь использовать django для создания потокового веб-сайта musi c. Я использовал поле models.image в моем models.py и вызвал его в views.py. Но когда я пытаюсь загрузить шаблон, используя На живом сервере изображения просто не отображаются. Вместо этого отображается только имя файла. my models.py:-
from django.db import models
# Create your models here.
class song_thumb(models.Model):
artist=models.CharField(max_length=100,null=True)
song_title=models.CharField(max_length=100,null=True)
album=models.CharField(max_length=100,null=True)
song_duration=models.FloatField(null=True)
img=models.ImageField(upload_to='pics',null=True)
my views.py:-
from django.shortcuts import render
from .models import song_thumb
# Create your views here.
def songs(request):
artist1=song_thumb()
artist1.artist='Alcest'
artist1.song_title='Kodama'
artist1.album='Kodama'
artist1.song_duration='9.10'
artist1.img='kodama.jpg'
artist2=song_thumb()
artist2.artist='Tash Sultana'
artist2.song_title='Jungle'
artist2.album='Jungle'
artist2.song_duration='5.17'
artist2.img='jungle.jpg'
artist3=song_thumb()
artist3.artist='Animals as leaders'
artist3.song_title='Cafo'
artist3.album='Cafo'
artist3.song_duration='6.56'
artist3.img='cafo.jpg'
artists=[artist1,artist2,artist3]
return render(request, 'home.html', {'artists':artists})
моя домашняя страница. html, которая используется для отображения всех данных: -
{% load static %}
{% static "images" as baseurl %}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Home Page</title>
<script src=" https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src= " https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<link rel="stylesheet" href= 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css' integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src= 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js' integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link rel="stylesheet" href="{% static 'home.css' %}">
<script src= 'https://kit.fontawesome.com/b99e675b6e.js'></script>
</head>
<body>
<!--sidebar-->
<div class="wrapper">
<div class="sidebar">
<h2>Sidebar</h2>
<ul>
<li><a href="#"><i class="fas fa-home"></i>Home</a></li>
<li><a href="#"><i class="fas fa-user"></i>Register</a></li>
<li><a href="#"><i class="fas fa-address-card"></i>About</a></li>
<li><a href="#"><i class="fas fa-project-diagram"></i>Sign in</a></li>
<li><a href="#"><i class="fas fa-address-book"></i>Contact</a></li>
</ul>
<div class="social_media">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
<!--topbar-->
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="home.html">Music Stream</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="signin.html">Sign In !<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="signup.html">Sign up!</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" tabindex="-1" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Genre
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Pop</a>
<a class="dropdown-item" href="#">Rock</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Classical</a>
</div>
</li>
</ul>
</div>
<!--search in topbar-->
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!--thumnail-->
<div class="container">
<h1>Thumbnail Previewer</h1>
{% for artist in artists %}
<ul class="grid-col">
<li><a href="{% static '#img-1' %}"><img src="{{baseurl}}/{{artist.thumb_pic}}" alt=""></a></li>
</ul>
{% endfor %}
<!-- preview content -->
<div class="data-content">
{% for artist in artists %}
<div id="img-1" class="tabcontent">
<div class="blog-content">
<div class="img">
<img src="{{baseurl}}/{{artist1.thumb_pic}}" alt="">
</div>
<div class="title">
<p> {{artist.artist}} </p><br>
<p>{{artist.song_title}}</p><br>
<p>{{artist.album}}</p><br>
<p>{{artist.song_duration}}</p><br>
<p>{{artist.img}}</p><br>
<button type="button" class="btn-blog">Read More</button>
</div>
<span>Close</span>
</div>
</div>
{% endfor %}
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script src="{% static 'assests/js/home.js' %}"></script>
</body>
</html>
Я не получаю кодов ошибок. Как я упоминал ранее, изображения не будут отображаться вместо имени файла. Я установил STATICFILES_DIR и STATIC_ ROOT в settings.py. Я также собрал stati c by python manage.py collectstati c.