Как вы визуализируете изображение в django?

#python #django

#python #django

Вопрос:

Я пытался визуализировать это изображение в шаблоне django, но, похоже, не могу этого сделать. Уже отредактировал код для отображаемой формы HTML.

HTML:

         <!-- Sidebar - Brand -->
        <a class="sidebar-brand d-flex align-items-center justify-content-center" href="{% url 'index' %}">
            <div class="sidebar-brand-icon rotate-n-15">
                <i class="fas fa-laugh-wink"></i>
            </div>
            <div class="sidebar-brand-text mx-3">Leadsy</div>
        </a>

        <!-- Divider -->
        <hr class="sidebar-divider my-0">

      {% with url_name=request.resolver_match.url_name %}
        <li class="nav-item {% if url_name == 'index' %}active{% endif %}">
            <a class="nav-link" href="{% url 'index' %}">
                <i class="fas fa-fw fa-tachometer-alt"></i>
                <span>Dashboard</span></a>
        </li>
        <!-- Divider -->
        <hr class="sidebar-divider">

        <!-- Heading -->
        <div class="sidebar-heading">
            Interface
        </div>

        <!-- Nav Item - Pages Collapse Menu -->
        <li class="nav-item {% if url_name == 'emailsearcher' %}active{% endif %}">
            <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true"
                aria-controls="collapseTwo">
                <i class="fas fa-fw fa-cog"></i>
                <span>Email Tools</span>
            </a>
            <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo"
                data-parent="#accordionSidebar">
                <div class="bg-white py-2 collapse-inner rounded">
                    <h6 class="collapse-header">Get Leads</h6>
                    <a class="collapse-item active" href="{% url 'emailsearcher' %}">Email Extractor</a>

                </div>
            </div>
        </li>

        <!-- Nav Item - Utilities Collapse Menu -->


        <!-- Divider -->
        <hr class="sidebar-divider">

        <!-- Heading -->
        <div class="sidebar-heading">
            Addons
        </div>

        <!-- Nav Item - Pages Collapse Menu -->
        <li class="nav-item {% if url_name == 'login' %}active{% endif %}">
            <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePages"
                aria-expanded="true" aria-controls="collapsePages">
                <i class="fas fa-fw fa-folder"></i>
                <span>Login</span>
            </a>
            <div id="collapsePages" class="collapse" aria-labelledby="headingPages" data-parent="#accordionSidebar">
                <div class="bg-white py-2 collapse-inner rounded">
                    <h6 class="collapse-header">Login Screens:</h6>
                    <a class="collapse-item" href="{% url 'login' %}">Login</a>
                    <a class="collapse-item" href="{% url 'register' %}">Register</a>
                    <a class="collapse-item" href='{% url "lostpassword" %}'>Forgot Password</a>

                </div>
            </div>
        </li>
 

{% endwith %}

         <!-- Nav Item - Tables -->

        <!-- Divider -->
        <hr class="sidebar-divider d-none d-md-block">

        <!-- Sidebar Toggler (Sidebar) -->
        <div class="text-center d-none d-md-inline">
            <button class="rounded-circle border-0" id="sidebarToggle"></button>
        </div>

    </ul>
    <!-- End of Sidebar -->

    <!-- Content Wrapper -->
    <div id="content-wrapper" class="d-flex flex-column">

        <!-- Main Content -->
        <div id="content">

            <!-- Topbar -->
            <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">

                <!-- Sidebar Toggle (Topbar) -->
                <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
                    <i class="fa fa-bars"></i>
                </button>

                <!-- Topbar Search -->
                <form
                    class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
                    <div class="input-group">
                        <input type="text" class="form-control bg-light border-0 small" placeholder="Search for..."
                            aria-label="Search" aria-describedby="basic-addon2">
                        <div class="input-group-append">
                            <button class="btn btn-primary" type="button">
                                <i class="fas fa-search fa-sm"></i>
                            </button>
                        </div>
                    </div>
                </form>

                <!-- Topbar Navbar -->
                <ul class="navbar-nav ml-auto">

                    <!-- Nav Item - Search Dropdown (Visible Only XS) -->
                    <li class="nav-item dropdown no-arrow d-sm-none">
                        <a class="nav-link dropdown-toggle" href="#" id="searchDropdown" role="button"
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fas fa-search fa-fw"></i>
                        </a>
                        <!-- Dropdown - Messages -->
                        <div class="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in"
                            aria-labelledby="searchDropdown">
                            <form class="form-inline mr-auto w-100 navbar-search">
                                <div class="input-group">
                                    <input type="text" class="form-control bg-light border-0 small"
                                        placeholder="Search for..." aria-label="Search"
                                        aria-describedby="basic-addon2">
                                    <div class="input-group-append">
                                        <button class="btn btn-primary" type="button">
                                            <i class="fas fa-search fa-sm"></i>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </li>

                    <!-- Nav Item - Alerts -->






                    <!-- Nav Item - User Information -->
                    <li class="nav-item dropdown no-arrow">

                            <span class="mr-2 d-none d-lg-inline text-gray-600 small">{{ request.user }}</span>
                            <span><a href="{% url 'logout' %}">Logout</a></span>
                            {% for imagess in userimage %}
                            <img src="{{ imagess.avatar.url }}">
                              {% endfor %}
                        </a>

                        <!-- Dropdown - User Information -->
                        <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in"
                            aria-labelledby="userDropdown">
                            <a class="dropdown-item" href="#">
                                <i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
                                Profile
                            </a>
                            <a class="dropdown-item" href="#">
                                <i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
                                Settings
                            </a>
                            <a class="dropdown-item" href="#">
                                <i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i>
                                Activity Log
                            </a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
                                <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
                                Logout
                            </a>
                        </div>
                    </li>

                </ul>
 

models.py:

 class UserProfile(models.Model):
    user = models.OneToOneField(User, on_delete=models.CASCADE, related_name="profile")
    avatar = models.ImageField(upload_to = "avatars/", null=True, blank=True)
 

представления для визуализации изображения:

 def imageprofile(request):
    userimage = UserProfile.objects.all()
    context = {'userimage': userimage}

    return render(request, 'leadfinderapp/dashboard.html', context)
 

Я был бы очень признателен за любую помощь. Спасибо вам за все и за любой ответ на вопрос, я был бы очень благодарен за это. Где я ошибаюсь?

Ответ №1:

Вы можете получить абсолютный путь к вашему изображению в шаблоне с {{ object.field_name.url }} помощью . Ссылка

 {% for imagess in userimage %}
    <img src="{{ imagess.avatar.url }}">
{% endfor %}
 

Комментарии:

1. можете ли вы показать визуализированный html и уверены, что изображения загружены на сервер?

2. MEDIA_ROOT = os.path.join(BASE_DIR, 'media') MEDIA_URL = '/media/' Будет ли это правильно?

3. итак, изображение находится в папке мультимедиа?

4. на самом деле он находится в папке avatars, но я изменил его на /avatars/ и все еще не работает

5. Окей, кроме аватара, вы можете отобразить список других полей, таких как user.username или user.first_name и т. Д.??