Есть ли другой способ загрузить изображение из frontend с помощью раздела upload ? не отображается и загружается со страницы index.html

Я пытался загрузить изображение со страницы index.html и также создал; modles.py, views.py, urls.py и вскоре, но я загрузил и оно успешно загрузилось в указанную директорию в models.py, но не смог просмотреть это изображение, перед этим показав изображение cut pic

views.py

from django.shortcuts import render
from django.http import HttpResponseRedirect
from .models import Upload
# Create your views here.

# Imaginary function to handle an uploaded file

def Home(request):
    if request.method == 'POST':
        photo = request.POST['doc']
        Upload.objects.create(document = photo)
        context ={
            
        }

    if request.method == "GET":
        photo = Upload.objects.all()
        context = {
            'phone': photo
        }
        
        
    return render(request, 'Home.drive.html', context)

models.py

from django.db import models

# Create your models here.
class Upload(models.Model):
    document = models.ImageField(upload_to='documents')

index.html

{% load static %}
<!DOCTYPE html>
{% block content %}
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>PB-2021</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static 'css/index.css' %}">
    <link rel="stylesheet" href="{% static 'css/bootstrap-5.css' %}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
  </head>
  <body>
    <nav style="font-size: 1em;
    list-style-type: none;
    display: block;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: sticky;
    top: 0;
    z-index: 1;">
      <input type="checkbox" id="check">
      <label for="check" class="checkbtn">
        <i class="fas fa-bars"></i>
      </label>
      <label class="logo">AMRIT SHAHI</label>
      <ul>
        <li><a class="active" href="{% url 'PBAPP:home' %}">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Pages</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>





<form method="POST" action="">
    {% csrf_token %}
<div style="float: right;">
  <label for="formFileLg" class="form-label">* File Upload</label>
  <input class="form-control form-control-lg" id="formFileLg" type="file" name="doc">
  <input type="submit" class="form-control form-control-lg" id="formFileLg" style="height: 10px; margin-top: 10px; background-color: #e9ecef;"/>
  <hr style="width: 100%;">
</div>
</form>
<hr>
{% for i in phone %}
<img src="{{i.document.url}}" alt="Girl in a jacket" width="200" height="200; display: flex;">


{% endfor %}






<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

        <footer class="bg-light text-center text-lg-start" style="width: 100%;">
          <!-- Copyright -->
          <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
            © 2021 Copyright:
            <a class="text-dark" href="https://theme.euesk.com">theme.euesk.com</a>
          </div>
          <!-- Copyright -->
        </footer>


<script src="{% static 'js/bootstrap-5.js' %}"></script>
  </body>
</html>

{% endblock %}

* Примечания: помощь приветствуется, мой вывод - только значок изображения, а не само изображение

#Edit this thing first in the form

<form method="POST" action="" enctype="multipart/form-data">

# This thing in the views.py

def Home(request):
   photo = ""
   if request.method == 'POST':
       photo = request.FILES['doc']
       Upload.objects.create(document = photo)

   if request.method == "GET":
       photo = Upload.objects.all()

   context = {
      'phone': photo
   }

По любому другому вопросу дайте мне знать.

Вернуться на верх