Django ajax как получить ссылку src изображения объекта?

Я реализую ajax на странице просмотра списка. Теперь я столкнулся с проблемой рендеринга изображения. Как получить ссылку src моего изображения для каждого объекта?

views.py:

class PostJsonListView(View):
    def get(self, *args, **kwargs):
        print(kwargs)
        upper = kwargs.get('num_posts')
        lower = upper - 1 
        posts = list(Blog.objects.values('id','title','body','blog_header_image')[lower:upper])
        posts_size = len(Blog.objects.filter(is_published='published'))
        max_size = True if upper >= posts_size else False
        return JsonResponse({'data':posts,'max': max_size},safe=False)

.html

  <div class="card mb-4" id="card mb-4"></div>



    <script>
    
    
    const postsBox = document.getElementById('card mb-4')
    console.log(postsBox)
    const spinnerBox = document.getElementById('spinner-box')
    const loadBtn = document.getElementById('load-btn')
    const loadBox = document.getElementById('loading-box')
    let visible = 1 
    
    const handleGetData = () => {
        $.ajax({
            type: 'GET',
            url: `/posts-json/${visible}/`,
            success: function(response){
                maxSize = response.max
                const data = response.data
                spinnerBox.classList.remove('not-visible')
                setTimeout(()=>{
                    spinnerBox.classList.add('not-visible')
                    data.map(post=>{
                        console.log(post.id)
                        postsBox.innerHTML += `<img class="img-fluid rounded"  style="max-height:1000px;max-width:1200px;" src="" alt="..." />`
                    })
                    if(maxSize){
                        console.log('done')
                        loadBox.innerHTML = "<h4>No more posts to load</h4>"
                    }
                }, 500)
            },
            error: function(error){
                console.log(error)
            }
        })
    }
    
    handleGetData()
    
    loadBtn.addEventListener('click', ()=>{
        visible += 3
        handleGetData()
    })
    
    
    </script>

Как получить href объекта, чтобы пользователь мог щелкнуть и просмотреть страницу подробностей? Также как вывести url изображения?

При получении url изображения с помощью values() в django вы не получите путь к изображению, чтобы получить путь, вам нужно дописать MEDIA_URL для каждого объекта следующим образом:

from django.conf import settings

posts = list(Blog.objects.values('id','title','body','blog_header_image')[lower:upper])
for post in posts:
     post['blog_header_image'] = settings.MEDIA_URL + post['blog_header_image']

и затем в вашем javascript вы можете получить доступ к изображению следующим образом:

postsBox.innerHTML += "<img ... src="+post.blog_header_image+"</>"

Или вы можете сделать это следующим образом:

 posts = list(Blog.objects.all()[lower:upper])
 data = list()
 for post in posts:
     data.append({'id': post.id, 'title': post.title, 'image_url': post.blog_header_image.url})

 return JsonResponse({'data':data,'max': max_size},safe=False)

А затем в javascript:

 postsBox.innerHTML += "<img ... src="+post.image_url+"</>"
Вернуться на верх