Django网站轮播图无法显示问题排查及代码修正请求

问题描述 #

已完成Django网站轮播图展示的所有必要步骤，但图片无报错却无法显示，怀疑home.html中的Django代码存在问题，以下是项目相关代码及排查修正方案。

项目代码 #

models.py #

from django.db import models
from datetime import datetime
from ckeditor.fields import RichTextField
from multiselectfield import MultiSelectField

# Create your models here.
class Car(models.Model):
    state_choice=(
        ('PU', 'Punjab'),
        ('KPK', 'Khyber PukhtunKha'),
        ('BL', 'Balochestan'),
        ('SN', 'Sindh'),
        ('FD', 'Federal Territory'),
    )
    TRANSMISSION_CHOICES = (
        ('M', 'Manual'),
        ('A', 'Automatic'),
    )
    door_choices = (
        ('2', '2'),
        ('3', '3'),
        ('4', '4'),
        ('5', '5'),
        ('6', '6'),
    )

    features_choices=(
        ('Cruise Control', 'Cruise Control'),
        ('Audio Interface', 'Audio Interface'),
        ('Airbags', 'Airbags'),
        ('Air Conditioning', 'Air Conditioning'),
        ('Seat Heating', 'Seat Heating'),
        ('Alarm System', 'Alarm System'),
        ('ParkAssist', 'ParkAssist'),
        ('Power Steering', 'Power Steering'),
        ('Reversing Camera', 'Reversing Camera'),
        ('Direct Fuel Injection', 'Direct Fuel Injection'),
        ('Auto Start/Stop', 'Auto Start/Stop'),
        ('Wind Deflector', 'Wind Deflector'),
        ('Bluetooth Handset', 'Bluetooth Handset'),
    )

    year_choice = []
    for r in range(2000, (datetime.now().year+1)):
        year_choice.append((r,r))
    car_title = models.CharField(max_length=255)
    state = models.CharField(choices=state_choice, max_length=100)
    city = models.CharField(max_length=100)
    color = models.CharField(max_length=100)
    model = models.CharField(max_length=100)
    year = models.IntegerField(('year'), choices=year_choice)
    condition = models.CharField(max_length=100)
    price = models.IntegerField()
    description = RichTextField()
    car_photo = models.ImageField(upload_to='photos/%Y/%m/%d/')
    car_photo_1 = models.ImageField(upload_to='photos/%Y/%m/%d/', blank=True)
    car_photo_2 = models.ImageField(upload_to='photos/%Y/%m/%d/', blank=True)
    car_photo_3 = models.ImageField(upload_to='photos/%Y/%m/%d/', blank=True)
    car_photo_4 = models.ImageField(upload_to='photos/%Y/%m/%d/', blank=True)
    features = MultiSelectField(choices=features_choices, max_length=255)
    body_style = models.CharField(max_length=100)
    engine = models.CharField(max_length=100)
    transmission = models.CharField(max_length=100)
    interior = models.CharField(max_length=100)
    miles = models.IntegerField()
    doors = models.CharField(choices=door_choices, max_length=10)
    passengers = models.IntegerField()
    vin_no = models.CharField(max_length=100)
    milage = models.IntegerField()
    fuel_type = models.CharField(max_length=50)
    no_of_owners = models.CharField(max_length=100)
    is_featured = models.BooleanField(default=False)
    created_date = models.DateTimeField(default=datetime.now, blank=True)

views.py #

from django.shortcuts import get_object_or_404, render
from cars.models import Car
# Create your views here.
def cars(request):
    cars = Car.objects.order_by('-created_date')
    data = {
        'cars': cars,
        }
    return render(request, 'cars/cars.html', data)
def car_detail(request, id):
    single_car = get_object_or_404(Car, pk=id)
    data = {
        'single_car': single_car,
    }

    all_cars = Car.objects.order_by('-created-date')
    data = {
        'all_cars' : all_cars,
    } 

    return render(request, 'cars/car_detail.html', data)

home.html #

<div class="featured-car content-area">
    <div class="container">
        <!-- Main title -->
        <div class="main-title">
            <h1>Latest <span>Cars</span></h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="row">
            {% for car in all_cars %}
            <div class="col-lg-4 col-md-6">
                <div class="car-box">
                    <div class="car-thumbnail">
                        <a href="{{car.car_photo}}" class="car-img">
                            <div class="tag">For Sale</div>
                            <img class="d-block w-100" src="{{car.car_photo.url}}" alt="car">
                            <div class="facilities-list clearfix">
                                <ul>
                                    <li>
                                        <span><i class="flaticon-way"></i></span>4,000 km
                                    </li>
                                    <li>
                                        <span><i class="flaticon-calendar-1"></i></span>2020
                                    </li>
                                    <li>
                                        <span><i class="flaticon-manual-transmission"></i </span>Manual
                                    </li>
                                </ul>
                            </div>
                        </a>
                        <div class="carbox-overlap-wrapper">
                            <div class="overlap-box">
                                <div class="overlap-btns-area">
                                    <div class="car-magnify-gallery">
                                        {% if car.car_photo_1 %} 
                                        <a href="{{car.photo_1}}" class="overlap-btn">
                                            <i class="fa fa-expand"></i>
                                            <img class="hidden" src="{{ car.car_photo_1.url }}">
                                        </a>
                                        {% endif %}
                                        {% if car.car_photo_2 %}
                                        <a href="{{ car.car_photo_2 }}" class="hidden">
                                            <img class="hidden" src="{{ car.car_photo_2.url }}">
                                        </a>
                                        {% endif %}
                                        {% if car.car_photo_3 %}
                                        <a href="{{ car.car_photo_3 }}" class="hidden">
                                            <img class="hidden" src="{{ car.car_photo_3.url }}">
                                        </a>
                                        {% endif %}
                                        {% if car.car_photo_4 %}
                                        <a href="{{ car.car_photo_4 }}" class="hidden">
                                            <img class="hidden" src="{{ car.car_photo_4.url }}">
                                        </a>
                                        {% endif %}
                                        {% if car.car_photo_5 %}
                                        <a href="{{ car.car_photo_5 }}" class="hidden">
                                            <img class="hidden" src="{{ car.car_photo_5.url }}">
                                        {% endif %}   
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="detail">
                        <h1 class="title">
                            <a href="car-details.html">Lamborghini Huracán</a>
                        </h1>
                        <div class="location">
                            <a href="car-details.html">
                                <i class="flaticon-pin"></i>123 Kathal St. Tampa City,
                            </a>
                        </div>
                    </div>
                    <div class="footer clearfix">
                        <div class="pull-left ratings days">
                            <p class="cartype">Sedan</p>
                        </div>
                        <div class="pull-right">
                            <p class="price">$850.00</p>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>

排查修正方案 #

1. 首页视图数据传递缺失 #

home.html中使用{% for car in all_cars %}循环数据，但当前views.py中没有对应首页的视图函数传递all_cars数据，导致模板无法获取到汽车数据，自然无法渲染图片。

修正：
在views.py中添加首页视图函数：

def home(request):
    all_cars = Car.objects.order_by('-created_date')
    return render(request, 'home.html', {'all_cars': all_cars})

同时在项目的urls.py中配置首页路由：

from django.urls import path
from .views import home, cars, car_detail

urlpatterns = [
    path('', home, name='home'),
    # 其他路由...
]

2. car_detail视图函数错误 #

• 重复赋值data字典，导致single_car数据丢失
• order_by('-created-date')中的字段名错误，应为created_date（下划线）

修正后的car_detail函数：

def car_detail(request, id):
    single_car = get_object_or_404(Car, pk=id)
    all_cars = Car.objects.order_by('-created_date')
    data = {
        'single_car': single_car,
        'all_cars': all_cars
    } 
    return render(request, 'cars/car_detail.html', data)

3. home.html模板代码错误 #

• 主图片的a标签href属性错误：应为{{ car.car_photo.url }}而非{{car.car_photo}}（后者是ImageField对象，不是URL）
• car_photo_1的a标签href属性错误：应为{{car.car_photo_1.url}}而非{{car.photo_1}}
• 存在多余的闭合</a>标签（在car_photo_5的判断之后），需删除
• 静态内容未替换为模型字段：所有汽车显示相同的标题、里程、年份等，需替换为对应模型字段

修正后的home.html关键部分：

<div class="row">
    {% for car in all_cars %}
    <div class="col-lg-4 col-md-6">
        <div class="car-box">
            <div class="car-thumbnail">
                <a href="{{car.car_photo.url}}" class="car-img">
                    <div class="tag">For Sale</div>
                    <img class="d-block w-100" src="{{car.car_photo.url}}" alt="{{car.car_title}}">
                    <div class="facilities-list clearfix">
                        <ul>
                            <li>
                                <span><i class="flaticon-way"></i></span>{{car.miles}} km
                            </li>
                            <li>
                                <span><i class="flaticon-calendar-1"></i></span>{{car.year}}
                            </li>
                            <li>
                                <span><i class="flaticon-manual-transmission"></i></span>{{car.transmission}}
                            </li>
                        </ul>
                    </div>
                </a>
                <div class="carbox-overlap-wrapper">
                    <div class="overlap-box">
                        <div class="overlap-btns-area">
                            <div class="car-magnify-gallery">
                                {% if car.car_photo_1 %} 
                                <a href="{{car.car_photo_1.url}}" class="overlap-btn">
                                    <i class="fa fa-expand"></i>
                                    <img class="hidden" src="{{ car.car_photo_1.url }}">
                                </a>
                                {% endif %}
                                {% if car.car_photo_2 %}
                                <a href="{{ car.car_photo_2.url }}" class="hidden">
                                    <img class="hidden" src="{{ car.car_photo_2.url }}">
                                </a>
                                {% endif %}
                                {% if car.car_photo_3 %}
                                <a href="{{ car.car_photo_3.url }}" class="hidden">
                                    <img class="hidden" src="{{ car.car_photo_3.url }}">
                                </a>
                                {% endif %}
                                {% if car.car_photo_4 %}
                                <a href="{{ car.car_photo_4.url }}" class="hidden">
                                    <img class="hidden" src="{{ car.car_photo_4.url }}">
                                </a>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="detail">
                <h1 class="title">
                    <a href="{% url 'car_detail' car.id %}">{{car.car_title}}</a>
                </h1>
                <div class="location">
                    <a href="{% url 'car_detail' car.id %}">
                        <i class="flaticon-pin"></i>{{car.city}}, {{car.state}}
                    </a>
                </div>
            </div>
            <div class="footer clearfix">
                <div class="pull-left ratings days">
                    <p class="cartype">{{car.body_style}}</p>
                </div>
                <div class="pull-right">
                    <p class="price">${{car.price}}.00</p>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
</div>

4. 媒体文件配置检查 #

确保settings.py中正确配置媒体文件路径：

# settings.py
MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / 'media'

并在项目的urls.py中添加媒体文件访问路由（仅开发环境使用）：

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

urlpatterns = [
    # 已有的路由
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

内容的提问来源于stack exchange，提问作者Web Extol College