Django ajax如何获取object图片src链接？

Question

我在我的列表视图页面中实现 ajax。 现在我面临渲染图像的问题。 如何获取每个 object 的图像 src 链接？

视图.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>    
         

如何获取 object href 以便用户可以点击查看详情页面？ 还如何渲染图像 url？

Answer 1

通过在 django 中使用values()获取图像 url 时，您将无法获取图像的路径来获取您需要为每个 object 预先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+"</>"