Django -基于主键显示模型数据

Question

我有一个多个图像的模型，我想在使用主键作为参考单击图像时在它们自己单独的Owl carousel中显示它们中的每一个。我已经设置了一切，但由于某种原因，我的图像没有被加载到旋转木马。我没有不好的回答，所以如果有人能帮助我，我将不胜感激。

编辑这里是我的models.py:

from django.db import models
# model for displaying images on homepage
class Portrait(models.Model):
name = models.CharField(max_length= 100)
painting = models.ImageField(upload_to= 'paintings')
long_description = models.TextField()
price = models.IntegerField()
short_description = models.TextField()
painting_left = models.ImageField(upload_to= 'carousel_paintings')
painting_right = models.ImageField(upload_to= 'carousel_paintings')
painting_top = models.ImageField(upload_to= 'carousel_paintings')
painting_bottom = models.ImageField(upload_to= 'carousel_paintings')
painting_back = models.ImageField(upload_to= 'carousel_paintings')
def __str__(self):
return self.name

# model for carousel
class Carousel(models.Model):
painting_front = models.ImageField(upload_to= 'carousel')
painting_left = models.ImageField(upload_to= 'carousel')
painting_right = models.ImageField(upload_to= 'carousel')
painting_top = models.ImageField(upload_to= 'carousel')
painting_bottom = models.ImageField(upload_to= 'carousel')
painting_back = models.ImageField(upload_to= 'carousel')
def __str__(self):
return self.name

urls . py:

urlpatterns = [
# homepage
path('', views.index, name='index'),
# get the primary key when an image is clicked
path('<int:pk>', views.index, name='index_with_pk'),
# use that primary key to fetch that image's data
path('carousel/', views.carouselData, name="carousel_data")
]

当图像被点击时，在index.html中调用ajax:

$.ajax({
type: "GET",
url: '{% url "carousel_data"%}',
data: { "prime_key": prime_key },
success: function(data) {
console.clear();
console.log("Image object primary key: " + prime_key);
$(".owl-carousel").owlCarousel({
items:1,
loop:true,
nav:true,
dots: false,
autoplay: false,
autoplayTimeout: 5000,
smartSpeed: 500,
autoplayHoverPause: false,
margin: 20,
touchDrag: true,
mouseDrag: false,
navText : ["<i class='fa fa-chevron-left'></i>","<i class='fa fa-chevron-right'></i>"]
});
},
error: function(data){
console.log('something went wrong');
}
})

views.py:

def carouselData(request):
if request.method == "GET":
# get the primary key from ajax
my_key = request.GET.get('prime_key')
carouselObjects = Portrait.objects.filter(pk=my_key).values(
'painting_left',
'painting_right',
'painting_top',
'painting_bottom',
'painting_back'
)[0]
carouselContext = {
'carouselObjects': carouselObjects
}
# return the data 
return render(request, "carousel.html", carouselContext)

carousel.html没有获取这些图像对象:

{% block carousel_content %}
<!-- left image -->
<div class="slide slide-4">
<div class="slide-content">
<img id="modal-img" src="{{ carouselContext.painting_left.url}}" />
</div>
</div>
<!-- right image -->
<div class="slide slide5">
<div class="slide-content">
<img id="modal-img" src="{{ carouselContext.painting_right.url}}" />
</div>
</div>
<!-- top image -->
<div class="slide slide5">
<div class="slide-content">
<img id="modal-img" src="{{ carouselContext.painting_top.url}}" />
</div>
</div>
{% endblock %}

Answer 1

我唯一的猜测是确保您在设置中有这些设置:

MEDIA_ROOT =  os.path.join(BASE_DIR, 'media') 
MEDIA_URL = '/media/'

你的url应该是:

from django.conf.urls.static import static
urlpatterns = [
# homepage
path('', views.index, name='index'),
# get the primary key when an image is clicked
path('<int:pk>', views.index, name='index_with_pk'),
# use that primary key to fetch that image's data
path('carousel/', views.carouselData, name="carousel_data")
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)