フルスタックチャンネル
サインアップサインアップ
ログインログイン
利用規約プライバシーポリシーお問い合わせ
Copyright © All rights reserved | FullStackChannel
解決済
03 プロフィール情報変更 でプロフィール画像が表示されません
Python
manabu
2024/06/30 12:51

実現したいこと

プロフィール画像を表示

発生している問題

プロフィール画面が表示できない

ソースコード

{% extends "app/base.html" %}

{% block content %}

<div class="card card-profile my-5 mx-auto">
    <div class="card-body">
        <h5 class="card-title text-center">プロフィール</h5>
        <table class="profile_table mb-4">
            <tbody>
                <tr>
                    <th class="header">プロフィール画像</th>
                    <td class="data">
                        {% if user_data.image %}
                            <img src='/{{ user_data.image.url }}' width=100px>
                        {% endif %}
                    </td>
                </tr>
                <tr>
                    <th class="header">名前</th>
                    <td class="data">{{ user_data.first_name }} {{ user_data.last_name }}</td>
                </tr>
                <tr>
                    <th class="header">メールアドレス</th>
                    <td class="data">{{ user_data.email }}</td>
                </tr>
                <tr>
                    <th class="header">自己紹介</th>
                    <td class="data">{{ user_data.description }}</td>
                </tr>
            </tbody>
        </table>
        <div class="button mx-auto">
            <a class="btn btn-lg btn-warning btn-block" href="{% url 'profile_edit' %}">編集する</a>
        </div>
    </div>
</div>

{% endblock %}
{% extends "app/base.html" %}
{% load widget_tweaks %}

{% block content %}

<div class="card card-profile my-5 mx-auto">
    <div class="card-body">
        <h5 class="card-title text-center">プロフィール</h5>
        <form method="post" enctype="multipart/form-data">
            {% csrf_token %}
            <table class="profile_table mb-4">
                <tbody>
                    <tr>
                        <th class="header">プロフィール画像</th>
                        <td class="data">
                            {{ form.image }}
                        </td>
                    </tr>
                    <tr>
                        <th class="header">名前</th>
                        <td class="data form_wrap form_wrap-2">
                            {% render_field form.first_name class="form-control" placeholder="姓" %}
                            {% render_field form.last_name class="form-control" placeholder="名" %}
                        </td>
                    </tr>
                    <tr>
                        <th class="header">自己紹介</th>
                        <td class="data">
                            {% render_field form.description class="form-control" placeholder="自己紹介" %}
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="button mx-auto">
                <button class="btn btn-lg btn-warning btn-block" type="submit">登録する</button>
            </div>
        </form>
    </div>
</div>

{% endblock %}
"""mysite URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/2.2/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path, include

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

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('app.urls')),
    path('accounts/', include('accounts.urls')),
    path('accounts/', include('allauth.urls')),
]

urlpatterns += static(settings.IMAGE_URL, document_root=settings.IMAGE_ROOT)
from django.db import models
from django.contrib.auth.base_user import AbstractBaseUser
from django.contrib.auth.models import UserManager, PermissionsMixin
from django.utils import timezone


class UserManager(UserManager):
    def _create_user(self, email, password, **extra_fields):
        email = self.normalize_email(email)
        user = self.model(email=email, **extra_fields)
        user.set_password(password)
        user.save(using=self._db)
        return user

    def create_user(self, email, password=None, **extra_fields):
        extra_fields.setdefault('is_staff', False)
        extra_fields.setdefault('is_superuser', False)
        return self._create_user(email, password, **extra_fields)

    def create_superuser(self, email, password, **extra_fields):
        extra_fields.setdefault('is_staff', True)
        extra_fields.setdefault('is_superuser', True)

        if extra_fields.get('is_staff') is not True:
            raise ValueError('Superuser must have is_staff=True.')
        if extra_fields.get('is_superuser') is not True:
            raise ValueError('Superuser must have is_superuser=True.')

        return self._create_user(email, password, **extra_fields)


class CustomUser(AbstractBaseUser, PermissionsMixin):
    email = models.EmailField('メールアドレス', unique=True)
    first_name = models.CharField(('姓'), max_length=30)
    last_name = models.CharField(('名'), max_length=30)
    description = models.TextField('自己紹介', default="", blank=True)
    image = models.ImageField(upload_to='images', verbose_name='プロフィール画像', null=True, blank=True)
    
    is_staff = models.BooleanField(
        ('staff status'),
        default=False,
        help_text=('Designates whether the user can log into this admin site.'),
    )
    is_active = models.BooleanField(
        ('active'),
        default=True,
        help_text=(
            'Designates whether this user should be treated as active. '
            'Unselect this instead of deleting accounts.'
        ),
    )

    objects = UserManager()

    USERNAME_FIELD = 'email'
    EMAIL_FIELD = 'email'
    REQUIRED_FIELDS = []

    class Meta:
        verbose_name = ('user')
        verbose_name_plural = ('users')

    def clean(self):
        super().clean()
        self.email = self.__class__.objects.normalize_email(self.email)
from django.views import View
from django.contrib.auth.mixins import LoginRequiredMixin
from accounts.models import CustomUser
from accounts.forms import ProfileForm, SignupUserForm
from django.shortcuts import render, redirect
from allauth.account import views


class SignupView(views.SignupView):
    template_name = 'accounts/signup.html'
    form_class = SignupUserForm


class LoginView(views.LoginView):
    template_name = 'accounts/login.html'


class LogoutView(views.LogoutView):
    template_name = 'accounts/logout.html'

    def post(self, *args, **kwargs):
        if self.request.user.is_authenticated:
            self.logout()
        return redirect('/')


class ProfileView(LoginRequiredMixin, View):
    def get(self, request, *args, **kwargs):
        user_data = CustomUser.objects.get(id=request.user.id)

        return render(request, 'accounts/profile.html', {
            'user_data': user_data,
        })


class ProfileEditView(LoginRequiredMixin, View):
    def get(self, request, *args, **kwargs):
        user_data = CustomUser.objects.get(id=request.user.id)
        form = ProfileForm(
            request.POST or None,
            initial={
                'first_name': user_data.first_name,
                'last_name': user_data.last_name,
                'description': user_data.description,
                'image': user_data.image
            }
        )

        return render(request, 'accounts/profile_edit.html', {
            'form': form,
            'user_data': user_data
        })

    def post(self, request, *args, **kwargs):
        form = ProfileForm(request.POST or None)
        if form.is_valid():
            user_data = CustomUser.objects.get(id=request.user.id)
            user_data.first_name = form.cleaned_data['first_name']
            user_data.last_name = form.cleaned_data['last_name']
            user_data.description = form.cleaned_data['description']
            if request.FILES.get('image'):
                user_data.image = request.FILES.get('image')
            user_data.save()
            return redirect('profile')

        return render(request, 'accounts/profile.html', {
            'form': form
        })
from django import forms
from allauth.account.forms import SignupForm


class SignupUserForm(SignupForm):
    first_name = forms.CharField(max_length=30, label='姓')
    last_name = forms.CharField(max_length=30, label='名')

    def save(self, request):
        user = super(SignupUserForm, self).save(request)
        user.first_name = self.cleaned_data['first_name']
        user.last_name = self.cleaned_data['last_name']
        user.save()
        return user


class ProfileForm(forms.Form):
    first_name = forms.CharField(max_length=30, label='姓')
    last_name = forms.CharField(max_length=30, label='名')
    description = forms.CharField(label='自己紹介', widget=forms.Textarea(), required=False)
    image = forms.ImageField(required=False, )

自分で試したこと

画像の形式を変更。コードの見直し 各種バージョンの確認

補足情報

https://i.gyazo.com/718f90390841ae4fb1a67236e8997d91.png

回答 1件
login
回答するにはログインが必要です
manabu
10か月前
{% extends "app/base.html" %}

{% block content %}

<div class="card card-profile my-5 mx-auto">
    <div class="card-body">
        <h5 class="card-title text-center">プロフィール</h5>
        <table class="profile_table mb-4">
            <tbody>
                <tr>
                    <th class="header">プロフィール画像</th>
                    <td class="data">
                        {% if user_data.image %}
                            <img src='{{ user_data.image.url }}' width=100px> # この/を削除したら表示できました。
                        {% endif %}
                    </td>
                </tr>
                <tr>
                    <th class="header">名前</th>
                    <td class="data">{{ user_data.first_name }} {{ user_data.last_name }}</td> 
                </tr>
                <tr>
                    <th class="header">メールアドレス</th>
                    <td class="data">{{ user_data.email }}</td>
                </tr>
                <tr>
                    <th class="header">自己紹介</th>
                    <td class="data">{{ user_data.description }}</td>
                </tr>
            </tbody>
        </table>
        <div class="button mx-auto">
            <a class="btn btn-lg btn-warning btn-block" href="{% url 'profile_edit' %}">編集する</a>
        </div>
    </div>
</div>

{% endblock %}