Vue.js и Django множественный рендеринг изображений

У меня возникли серьезные проблемы при попытке вывести несколько изображений на фронтенд Vue.js из статической папки в проекте Django. Я могу получить одно изображение без проблем, но это не работает для нескольких изображений. Мои изображения загружаются через раздел администратора приложения. Любая помощь будет очень признательна, я потратил несколько дней на это!!!!!

Вот мой 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

И мой serializers.py. * Я не уверен, что мне нужно реализовывать модели изображений в сериализаторах, но я попробовал это для проверки:

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')

Мой шаблон vue (раздел):

                    <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>

И, наконец, мой 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)

Помогите, пожалуйста, я перепробовал все, что знаю. Это первый проект, который я сделал, используя Vue.js, и я не нахожу его очень легким!

Вернуться на верх