Estoy implementando ajax en mi página de vistas de lista. Ahora estoy enfrentando problemas para renderizar la imagen. ¿Cómo obtener el enlace src de mi imagen de cada objeto?
vistas.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>¿Cómo obtener el objeto href para que el usuario pueda hacer clic y ver la página de detalles? también cómo renderizar la URL de la imagen?
Al obtener la URL de la imagen mediante el uso de values() en django, no obtendrá la ruta de su imagen para obtener la ruta que necesita para anteponer su MEDIA_URL para cada objeto como este:
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']y luego en tu javascript puedes acceder a la imagen de esta manera:
postsBox.innerHTML += "<img ... src="+post.blog_header_image+"</>"O podrías hacerlo así:
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)Y luego en javascript:
postsBox.innerHTML += "<img ... src="+post.image_url+"</>"