如何在Django問卷中顯示影像

我正在開發一個 Django 應用程式，用戶可以在其中進行他們從調查串列中選擇的任何調查。對于其中一項調查，他們應該選擇最能代表他們心情的影像。對于他們的回答，我不需要記錄他們選擇的影像，只需要記錄它所代表的心情的名稱（例如，“開朗”）。因此，我還沒有向模型添加“影像”欄位。但是，用戶應該能夠看到影像并選擇它。目前我無法顯示影像，只能獲取名稱。我已經檢查了我的代碼，但仍然無法找到錯誤。順便說一句，沒有收到任何技術錯誤訊息。感謝您的任何建議。下面是我的模型、視圖和 HTML。對于冗長的檔案，我深表歉意。

謝謝！

楷模

User = settings.AUTH_USER_MODEL

class Questionnaire(models.Model): 
    name = models.CharField(max_length=255) 
    text = models.CharField(max_length=200)

    def __str__(self):
        return self.name

class Question(models.Model):
    text = models.CharField(max_length=200)
    questionnaire = models.ForeignKey(Questionnaire, on_delete=models.CASCADE, related_name='questions')
    def __str__(self):
        return self.text

class Answer(models.Model):
    questionnaire = models.ForeignKey(Questionnaire, on_delete=models.CASCADE, related_name='answers', default='')
    text = models.CharField(max_length=200)

    def __str__(self):
        return self.text
 
class Response(models.Model):
    user = models.ForeignKey(User, on_delete = models.CASCADE)  
    date = models.DateTimeField(auto_now_add=True)
    question = models.ForeignKey(Question, on_delete = models.CASCADE)
    answer = models.ForeignKey(Answer, on_delete = models.CASCADE)
    def __str__(self):
        return '%s - %s - %s - %s' % (self.user, self.question, self.answer, self.date)

觀看次數

from django.forms import ModelForm
class ResponseForm(ModelForm):
    class Meta:
        model = Response
        fields = ['question', 'answer']
        # widgets= {'answer': RadioSelect}
    
    def __init__(self, *args, user=None, **kwargs):
        self.user = user
        super().__init__(*args, **kwargs)

    def save(self, commit=True):
        response = super().save(commit=False)
        response.user = self.user
        return response.save()


def take_questionnaire_fs(request, questionnaire_id):

    ResponseFormSet = modelformset_factory(Response, form=ResponseForm, extra=0)
    if request.method == 'POST':
        formset = ResponseFormSet(request.POST or None, request.FILES, form_kwargs={'user': request.user})
        if formset.is_valid():
            print("Formset is valid")
            formset.save()
            return HttpResponseRedirect(reverse ('questionnaires:questionnaire_index'))
        else:
            print("Formset is NOT valid")
            print(formset.errors)
            print(formset.non_form_errors())

    questions = Question.objects.filter(questionnaire_id=questionnaire_id)
    answers = Answer.objects.filter(questionnaire_id=questionnaire_id)

    return render(request, 'questionnaires/take_questionnaire_fs.html', {
        'questions': questions,
        'answers': answers,
        })

HTML

{% extends "base.html" %}
{% block page_content %}


{% if questionnaire.name == 'Pick-a-Mood' %}
<form action="{{ request.url }}" method="post">
{% csrf_token %} 
  <style>

    .circle-container {
            position: relative;
            width: 24em;
            height: 24em;
            padding: 2.8em;
            /*2.8em = 2em*1.4 (2em = half the width of a link with img, 1.4 = sqrt(2))*/
            /* border: dashed 1px; */
            border-radius: 50%;
            margin: 1.75em auto 0;
        }
        .circle-container label {
            display: block;
            position: absolute;
            top: 50%; left: 50%;
            width: 8em; height: 8em;
            margin: -2em;
        }
        .circle-container img { display: block; width: 100%; }
        .deg22_5 { transform: rotate(22.5deg) translate(12em) rotate(-22.5deg); }
        .deg67_5 { transform: rotate(67.5deg) translate(12em) rotate(-67.5deg); }
        .deg112_5 { transform: rotate(112.5deg) translate(12em) rotate(-112.5deg); }
        .deg157_5 { transform: rotate(157.5deg) translate(12em) rotate(-157.5deg); }
        .deg202_5 { transform: rotate(202.5deg) translate(12em) rotate(-202.5deg); }
        .deg247_5 { transform: rotate(247.5deg) translate(12em) rotate(-247.5deg); }
        .deg292_5 { transform: rotate(292.5deg) translate(12em) rotate(-292.5deg); }
        .deg337_5 { transform: rotate(337.5deg) translate(12em) rotate(-337.5deg); }
    
    
    /* HIDE RADIO */
    [type=radio] { 
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }
    
    /* IMAGE STYLES */
    [type=radio]   img {
      cursor: pointer;
    }
    
    /* CHECKED STYLES */
    [type=radio]:checked   img {
      border: 2px solid #f00;
      
    }
    [type=radio]:not(:checked)   img {
      border: none;
    }
    
    </style>

    <div class="circle-container">
        <label class='center'>
            <input type="radio" name="pickamood" value="Neutral">
            <img src="/static/mysurveys/female_neutral.png">
        </label>
    
        <label class='deg22_5'>
            <input type="radio" name="pickamood" value="Relaxed">
            <img src="/static/mysurveys/female_relaxed.png">
        </label>
    
        <label class='deg67_5'>
            <input type="radio" name="pickamood" value="Calm">
            <img src="/static/mysurveys/female_calm.png">
        </label>
    
        <label class='deg112_5'>
            <input type="radio" name="pickamood" value="Bored">
            <img src="/static/mysurveys/female_bored.png">
        </label> 
        
        <label class='deg157_5'>
            <input type="radio" name="pickamood" value="Sad">
            <img src="/static/mysurveys/female_sad.png">
        </label>
    
        <label class='deg202_5'>
            <input type="radio" name="pickamood" value="Irritated">
            <img src="/static/mysurveys/female_irritated.png">
        </label>
    
        <label class='deg247_5'>
            <input type="radio" name="pickamood" value="Tense">
            <img src="/static/mysurveys/female_tense.png">
        </label>
    
        <label class='deg292_5'>
            <input type="radio" name="pickamood" value="Excited">
            <img src="/static/mysurveys/female_excited.png">
        </label>     
    
        <label class='deg337_5'>
            <input type="radio" name="pickamood" value="Cheerful">
            <img src="/static/mysurveys/female_cheerful.png">
        </label>     
    </div>
<a>
  <input type="submit" value="Submit" >
</a>
 
</form>

{% else %}
<form method="post" action="{{ request.url }}">
    {% csrf_token %}

    {% for question in questions %}
        <h1>{{question.text}}</h1> 
    
        <label hidden="" for="id_form-{{ forloop.counter0 }}-question">Question:</label>
        <select hidden="" name="form-{{ forloop.counter0 }}-question" id="id_form-{{ forloop.counter0 }}-question">
            <option value="{{question.id}}" selected="">{{question.text}}</option>
        </select>

        <label for="id_form-{{ forloop.counter0 }}-answer">Answer:</label>
        <select required="" name="form-{{ forloop.counter0 }}-answer" id="id_form-{{ forloop.counter0 }}-answer">
            <option value="" selected="">---------</option>
            {% for answer in answers %}
                <option value="{{answer.id}}">{{answer.text}}</option>
            {% endfor %}
        </select>
        
        <input type="hidden" name="form-{{ forloop.counter0 }}-id" value="{{ forloop.counter }}" id="id_form-{{ forloop.counter0 }}-id">
           
        <input type="hidden" name="form-TOTAL_FORMS" value="{{questions|length}}" id="id_form-TOTAL_FORMS" />
        <input type="hidden" name="form-INITIAL_FORMS" value="0" id="id_form-INITIAL_FORMS" />
        <input type="hidden" name="form-MAX_NUM_FORMS" value="{{questions|length}}" id="id_form-MAX_NUM_FORMS" />

    {% endfor %}


    <br />
    <br />
    <input type="submit" value="Submit">
</form>
{% endif %}

{% endblock %}

uj5u.com熱心網友回復：

您需要使用靜態檔案。

確保它已在您的 settings.py 中設定，然后在 html load static 中設定并使用它來獲取您的檔案。

例如。假設您的檔案位于靜態檔案夾中，并且在 settings.py 中設定

<img src="{% static 'mysurveys/female_irritated.png' %}">

uj5u.com熱心網友回復：

按順序嘗試以下步驟：

1. 確保它django.contrib.staticfiles包含在您的INSTALLED_APPS 中。

2. 在您的設定檔案中，定義 STATIC_URL：

    STATIC_URL = '/static/'
   

3. 在您的模板檔案中

    {% load static %}
    <img src="{% static 'mysurveys/female_irritated.png' %}" alt="image alt">
   

4. 將您的靜態檔案存盤在您的應用程式中名為 static 的檔案夾中。例如my_app/static/mysurveys/female_bored.png。正如你所做的那樣

Django 檔案中的更多資訊。

標籤：Python html 姜戈

上一篇：是否可以在Flexbox中放置一個Flexbox？

下一篇：根據選中的單選按鈕顯示/隱藏磁區：