Django using {{ MEDIA_URL }} in template with HttpResponse

Question

I'm trying to use {{ MEDIA_URL }} in my template tag. This is my html code:

<li data-ng-repeat="image in pictures[currentCat]">
    <a>
        <img src="{{ MEDIA_URL }}{$ image.imgs $}" />
    </a>
</li>

I'm sending the json to a js and use it in AngularJS

$http.get("imagelist/").success(function(data) {
      $scope.pictures=data;
});

And I've add this part to my setting.py:

TEMPLATE_CONTEXT_PROCESSORS = (
  "django.contrib.auth.context_processors.auth",
  "django.core.context_processors.media",
)

Now this answer suggest to do this

from django.template.context import RequestContext

context = {'latest': p}
render_to_response('Question/latest.html',
                   context_instance=RequestContext(request, context))

But I'm using HttpResponse and it doesn't work on my code.

def getimagelist(request):
    dictionaries=[]
    for cat in Category.objects.all():
        dictionary=[obj.as_json() for obj in Gallery.objects.filter(cat_id=cat.id)]
        dictionaries.append(dictionary)
    return HttpResponse(json.dumps(dictionaries), content_type='application/json')

My question is how to use {{ MEDIA_URL }} in my code when using HttpResponse ?

Currently it shows blank in my html. Thanks

Where are you trying to use MEDIA_URL? Your response object doesn't have any reference to your template, in this context the only response you'll get will be a dump of your dictionaries. — axelcdv, Feb 04 '15 at 16:38
This question doesn't make sense. You're not using any templates at all. Where are you putting that STATIC_URL tag? — Daniel Roseman, Feb 04 '15 at 16:38
But this still doesn't make sense. Your view doesn't mention *any templates at all*. So where is that template tag being used? — Daniel Roseman, Feb 04 '15 at 16:51
But that *still* isn't the relevant information. Something is sending that AngularJS template from the backend to the frontend. Is it going through Django? In which case there is a view that is doing it. *That* is what you should be posting. — Daniel Roseman, Feb 04 '15 at 17:00
Yes, and as I said that's not the relevant bit. The thing that you need to add RequestContext to is the thing that is rendering the Angular template where you are actually using MEDIA_URL. The view you have posted is just providing JSON data, and is therefore completely irrelevant to the question. — Daniel Roseman, Feb 04 '15 at 17:14
@DanielRoseman Does it help if I include my model with json export to my question? Sorry I don't really get what is missing — Ghasem, Feb 04 '15 at 17:20
No. I can't understand how to make it any clearer. You have shown some HTML with a template variable in. How is that being sent to the user? — Daniel Roseman, Feb 04 '15 at 17:22
@DanielRoseman When page loads, that js code gets run and fills the `Pictures` so when Angular code loads in the pages, it has json info in it. — Ghasem, Feb 04 '15 at 17:29

score 1 · Accepted Answer · answered Feb 05 '15 at 17:27

Turned out I didn't need any of those. Since I'm using nginx to handle my site, I just added media path to nginx locations

location /media/ {
               autoindex on;
               alias mysitepath/media/;
          }

and changed my html code like this

<img src="/media/{$ image.imgs $}" />

So now everythong works just fine

axelcdv · Answer 2 · 2015-02-04T17:30:59.910

0

You're not passing the MEDIA_URL variable in your response's context. You should be doing something like this:

from django.conf import settings
data = {'pictures': dictionaries, 'mediaUrl': settings.MEDIA_URL}

HttpResponse(json.dumps(data), content_type='application/json')

In your angular code:

$http.get("imagelist/").success(function(data) {
      $scope.pictures = data.pictures;
      $scope.mediaUrl = data.mediaUrl;
});

And in your template

<img src="{$ mediaUrl $}{$ image.imgs $}" />

That way, the media url is passed from your settings down to your angular app and loaded in the angular template (all of this could use better naming though, but you get the idea).

edited Feb 04 '15 at 17:30

answered Feb 04 '15 at 16:33

axelcdv

753
6
18

I don't include any templates in my code. how should I customize your code? – Ghasem Feb 04 '15 at 17:09
As @daniel-roseman said, if you don't want to be returning a template, you need to pass MEDIA_URL as part of the json you return to your frontend client (so, angular) – axelcdv Feb 04 '15 at 17:12
I tried this. But `mediaUrl` is blank. I tested it in a `
{$mediaUrl$}
` nothing shows up – Ghasem Feb 04 '15 at 17:39
Are you sure you have set the MEDIA_URL settings in your django project then? What happens if you print it in your view? You need to set MEDIA_URL='/my/url/' to your settings.py file – axelcdv Feb 04 '15 at 17:41
this is my MEDIA_URL setting > `MEDIA_URL = '/media/' MEDIA_ROOT = os.path.join(PROJECT_PATH, 'media')` – Ghasem Feb 04 '15 at 17:44
Actually it returns `/media/`. But the problem is if I use `/static/mypic.jpg` it shows the pic. but if `/media/mypic.jpg` it doesn't work. although `static` and `media` are next to each other in my website. Should I Open a new question about it? – Ghasem Feb 04 '15 at 17:57
Yes, that's not the same issue. So the solution works? – axelcdv Feb 04 '15 at 22:07
Not really. But i found my solution and posted an answer. You can check it out. But thanks for time and effort. I really appreciate it. :) – Ghasem Feb 05 '15 at 17:28

Django using {{ MEDIA_URL }} in template with HttpResponse

2 Answers2

{$mediaUrl$}