Django ajax如何获取对象图像src链接？答案

【问题标题】：Django ajax how to get object image src link?Django ajax如何获取对象图像src链接？
【发布时间】：2022-01-09 23:11:36
【问题描述】：

我正在我的列表视图页面中实现 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？

【问题讨论】：

你没试过吗：postsBox.innerHTML += "<img ... src="+post.blog_header_image+"...</>"

标签： javascript python python-3.x django ajax

【解决方案1】：

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

【讨论】：