I am having some major issues trying to render multiple images to my Vue.js frontend from a static folder in my Django project. I can get one image showing without issues but it does not seem to work for multiple images. My images are uploaded via the admin section of the app. Any help would be really appreciated I have spent days on this!!!!!
Here is my models.py:
class Lesson(models.Model):
DRAFT = 'draft'
PUBLISHED = 'published'
CHOICES_STATUS = (
(DRAFT, 'Draft'),
(PUBLISHED, 'Published')
)
ARTICLE = 'article'
QUIZ = 'quiz'
CHOICES_LESSON_TYPE = (
(ARTICLE, 'Article'),
(QUIZ, 'Quiz')
)
course = models.ForeignKey(Course, related_name='lessons', on_delete=models.CASCADE)
title = models.CharField(max_length=255)
slug = models.SlugField()
short_description = models.TextField(blank=True, null=True)
long_description = models.TextField(blank=True, null=True)
status = models.CharField(max_length=20, choices=CHOICES_STATUS, default=PUBLISHED)
lesson_type = models.CharField(max_length=20, choices=CHOICES_LESSON_TYPE, default=ARTICLE)
image = models.ImageField(upload_to='uploads/', blank=True, null=True)
def __str__(self):
return self.title
class LessonImage(models.Model):
lesson_image = models.ForeignKey(Lesson, related_name='images', on_delete=models.CASCADE)
image = models.ImageField(upload_to ='uploads/')
def save(self, *args, **kwargs):
super(LessonImage, self).save(*args, **kwargs)
img = Image.open(self.image.path)
if img.height > 1125 or img.width > 1125:
img.thumbnail((1125,1125))
img.save(self.image.path,quality=70,optimize=True)
def get_images(self):
if self.lesson_image:
return settings.WEBSITE_URL + self.lesson_image.url
And my serializers.py. * Im not sure I needed to implement the image models in the serializers but I have tried this to test:
class LessonListSerializer(serializers.ModelSerializer):
class Meta:
model = Lesson
fields = ('id', 'title', 'slug', 'short_description', 'long_description', 'images')
class LessonImageSerializer(serializers.ModelSerializer):
class Meta:
model = LessonImage
fields = ('id', 'slug', 'lesson_image', 'get_images')
My vue template (section):
<div class="column is-10">
<template v-if="$store.state.user.isAuthenticated">
<template v-if="activeLesson">
<h2>{{ activeLesson.title }}</h2>
{{ activeLesson.long_description }}
<img v-for="(images, index) in activeLesson.images"
:src="get_images" :key="index" />
<script>
import axios from 'axios'
export default {
data() {
return {
course: {},
lessons: [],
comments: [],
activeLesson: null,
errors: [],
comment: {
name: '',
content: ''
},
// images:[],
}
},
async mounted() {
console.log('mounted')
const slug = this.$route.params.slug
await axios
.get(`/api/v1/courses/${slug}/`)
.then(response => {
console.log(response.data)
this.course = response.data.course
this.lessons = response.data.lessons
})
document.title = this.course.title + ' | Relate'
},
methods: {
submitComment() {
console.log('submitComment')
this.errors = []
if (this.comment.name === '') {
this.errors.push('The name must be filled out')
}
if (this.comment.content === '') {
this.errors.push('The content must be filled out')
}
if (!this.errors.length) {
axios
.post(`/api/v1/courses/${this.course.slug}/${this.activeLesson.slug}/`, this.comment)
.then(response => {
this.comment.name = ''
this.comment.content = ''
this.comments.push(response.data)
})
.catch(error => {
console.log(error)
})
}
},
setActiveLesson(lesson) {
this.activeLesson = lesson
this.getComments()
this.get_lesson_images()
},
getComments() {
axios
.get(`/api/v1/courses/${this.course.slug}/${this.activeLesson.slug}/get-comments/`)
.then(response => {
console.log(response.data)
this.comments = response.data
})
}
}
}
</script>
And finally my admin.py:
class LessonImageAdmin(admin.StackedInline):
model = LessonImage
class LessonCommentInline(admin.TabularInline):
model = Comment
raw_id_fields = ['lesson']
class LessonAdmin(admin.ModelAdmin):
list_display = ['title', 'course', 'status', 'lesson_type']
list_filter = ['status', 'lesson_type']
search_fields = ['title', 'short_description', 'long_description']
inlines = [LessonImageAdmin, LessonCommentInline]
class Meta:
model = Lesson
admin.site.register(Category)
admin.site.register(Course)
admin.site.register(Lesson, LessonAdmin)
admin.site.register(LessonImage)
admin.site.register(Comment)
Please help I have tried everything I know. This is the first project I have done using Vue.js and I’m not finding it very easy!
