Get the images from ImageField and not its address

Using Django
1

Dear, when I try to get the image from ImageField what I get is the address of the image and not the image itself. How is it possible to get the image?

What I want is to send those images and do not send the image path.

Is there a way to get the images from the ImageField field and not its address?

def requestRubros(request, tipo,user, rubro):
     proveedores=serviceProvider.objects.filter(user=user)
            print(proveedores.first())
            if proveedores:
                rubro=item.objects.filter(provider=proveedores.first()).filter(items=rubro)
                if rubro:
                    img=[]
                    img.append(rubro.first().picture1)
                    img.append(rubro.first().picture2)
                    img.append(rubro.first().picture3)
                    return HttpResponse(img)

this is the model item

class item (models.Model):
    certificate=models.ImageField(default=None)	
    provider = models.ForeignKey(serviceProvider, on_delete=models.CASCADE, null=True)
    radius = models.FloatField(default=None)
    description= models.TextField(blank = True)
    hour_init = models.TimeField()
    hour_end = models.TimeField()
    picture1=models.ImageField(default=None)	
    picture2=models.ImageField(default=None)	
    picture3=models.ImageField(default=None)
2

This appears to be effectively the same issue as you’ve specified in another thread. There’s still the one outstanding question - how is the client requesting this data?

An image is not directly a suitable data stream for an HttpResponse. To properly answer your questions about this, we’re going to need to know what the client is doing.

3

The client sends the user type, the user and another argument. So with that information you must send all the item model data

When the user receives the data, it separates them by “-” and saves them in the respective variables.

  const axios = require('axios');
  axios.get(url+"pedirrubros/"+props.clientType+"/"+props.user+"/"+see)
    .then((res: { data: any; }) => {
      const resquest = res.data;
      data=resquest.split("-")
      picture1= data[0]
      picture2= data[1]
      picture3= data[2]
    });

Because in the view function, when appends, the separator “-” is also added

def requestRubros(request, tipo,user, rubro):
     proveedores=serviceProvider.objects.filter(user=user)
            print(proveedores.first())
            if proveedores:
                rubro=item.objects.filter(provider=proveedores.first()).filter(items=rubro)
                if rubro:
                    img=[]
                    img.append(rubro.first().picture1)
                    img.append("-")
                    img.append(rubro.first().picture2)
                    img.append("-")
                    img.append(rubro.first().picture3)
                    img.append("-")
                    return HttpResponse(img)
4

An image is not text. You’re going to encounter a number of problems trying to work with them as if they were.

If you’re really needing to transfer multiple images in a single request, I’d suggest you base64encode each of the images and transfer them as separate keys as an array within your JSON response.

Also, since you’re making an AJAX call to the view, you’ll want to create a JsonResponse, not an HttpResponse

1 Like
5

Thanks Sir.

What I did is this:

img.append(base64.b64encode(rubro.first().picture1.read()))
img.append("-")
img.append(base64.b64encode(rubro.first().picture2.read()))
img.append("-")
img.append(base64.b64encode(rubro.first().picture3.read()))
img.append("-")
return HttpResponse(imagenes)

Why It necesari a JsonResponse an not an httpResponse? Excuse my ignorance

6

Is it strictly necessary in this case? Probably not. But you’re doing more work on both ends than what’s necessary.
You’re doing extra work by concatenating these images into a single string, then doing additional work on the client side by splitting it back apart.
On the other hand, if you send this as a JSON list, you’re sending the images as separate items within the list - the browser doesn’t need to do any work to split them. It has received them as separate items.

Read the docs on what a JsonResponse is, and compare it to what an HttpResponse is (same docs page). Keep in mind that what you’re returning from the server is not HTML, it’s data that can be best expressed as a JSON data object.

1 Like