How to hx-get media data (django)

[kkvero]

Hey! Thumbs up to htmx!
I'm trying to hx-get image files in django. In development everything works fine, in production I get 404.
The request is from example.com/page2, the file is at example.com/media/image.webp
Apparently it tries to get the file from example.com/page2/media/image.webp

I resolved it specifying hx-replace-url="/".
Then it fetches the image successfully but the address bar then has example.com instead of example.com/page2.

What is the proper way to hx-get media files and keep the state of the address bar?

[geoffrey-eisenbarth]

Can you provide a copy/paste of both the Django template code and the actual rendered HTML for the element with the hx attributes?

[kkvero]

Sure.
Template with hx-get:

<div id="display_photo" ... </div>
<div>
{% if photos.0 %}
<!-- photos: [[thumb, photo], [],] -->
  {% for thumb, photo in photos %}
    <a hx-get="{% url 'display_image' photo.url photo.width photo.height %}" hx-target="#display_photo" hx-replace-url="/"><img src="{{ thumb.url }}" class="rounded m-1" width="{{ thumb.width }}" height="{{ thumb.height }}" alt="" style="cursor: pointer;" /></a>
  {% endfor %}
</div>
{% endif %}

Partial that the view uses to display the image:

<img src="{{ image_url }}" width="{{ image_width }}" height="{{ image_height }}" class="rounded img-fluid" alt="" />

Actual rendered HTML (in dev).

<!--Bigger image that thumbnail gets-->
<div class="flex-shrink-0 mb-2 me-3" id="display_photo"><img alt="" class="rounded img-fluid" height="500" src="/media/tshirts_blanks/CL-white-3964_LA2HkC6/d57c48073c871669486bfa1171ee9376.webp" width="300"></div>

<!--Thumbnail that should get a bigger image-->
<a hx-get="/calc//media/tshirts_blanks/CL-white-3964_LA2HkC6/d57c48073c871669486bfa1171ee9376.webp/300/500" hx-replace-url="/" hx-target="#display_photo" class=""><img alt="" class="" height="125" src="/media/tshirts_blanks/CL-white-3964_LA2HkC6/f1f586429c670c45ce0be28e30d67a8f.webp" style="cursor:pointer" width="70"></a>
<img alt="" class="" height="125" src="/media/tshirts_blanks/CL-white-3964_LA2HkC6/f1f586429c670c45ce0be28e30d67a8f.webp" style="cursor:pointer" width="70">
</a>

When live, the same except:

<div id="display_photo">
<img src="media/tshirts_blanks/CL1-01_3964/3a7ae35d9daf5a4529b80c574ab22398.webp" width="177"></div>

<a hx-get="/calc//media/tshirts_blanks/CL-white-3964_LA2HkC6/d57c48073c871669486bfa1171ee9376.webp/300/500"....</a>

Well, I can spot the difference: in dev he gets from src="/media/.., in prod he gets from src="media/..
Not sure what to derive from that.

[geoffrey-eisenbarth]

Yeah, that was what I was hoping it was!

Check the value of Django's MEDIA_URL in your prod settings and make sure it's an absolute URL (starting with /).

[kkvero]

Yeah, that was what I was hoping it was!

Check the value of Django's MEDIA_URL in your prod settings and make sure it's an absolute URL (starting with /).

In both dev and prod settings I have MEDIA_URL = "/media/".
It should be fine because my other media files (like the thumbnails) that I don't fetch with htmx, are displayed OK.

Other things I tried:

• check media url setting on the PAAS, it is also /media/. Tested media/, then the thumbnails are 404.
• I also used hx-push-url="true" to make example.com/calc/tshirts-costs/ from example.com/calc/
  Removed hx-push-url, no difference, still 404 for hx-get bigger media images.
• Tried hx-replace-url to where I want to be (= where I was) after hx-get, namely hx-replace-url="example.com/calc/tshirts-costs/".
  Still 404 for hx-get bigger media images.
• Actually I do get thumbnails with htmx. And it works without hx-replace-url. With thumbnails the view passes ImageFieldFile, template gets url with img.url. With bigger images image url is passed to the view directly. So tried the thumbnail way, also didn't work, then get 500 in prod (though ok in dev).

Browser -> Network results after clicking on a thumbnail:
with hx-replace-url="/"
200
https://example.com/calc//media/tshirts_blanks/M2-olive-5654/2485cf894997341c0d708dbdd661de86.webp/174/300
200
https://example.com/media/tshirts_blanks/M2-olive-5654/2485cf894997341c0d708dbdd661de86.webp

without hx-replace-url="/"
200
https://example.com/calc//media/tshirts_blanks/CL1-01_3964/3a7ae35d9daf5a4529b80c574ab22398.webp/177/314
404
https://example.com/calc/tshirts-cost/media/tshirts_blanks/CL1-01_3964/3a7ae35d9daf5a4529b80c574ab22398.webp

So still using hx-replace-url="/" and getting in browser address bar example.com after hx-get (instead of the desired initial url like example.com/page1)

[geoffrey-eisenbarth]

To clarify, you don't want the URL to change when someone clicks the link, right? In that case you should not specify hx-push-url nor hx-replace-url, just the hx-get and hx-target (and maybe hx-swap).

Why do your hx-get URLs start with /calc//media/ instead of just /media/...?

[kkvero]

Hey, thanks for sticking with me here!
I found another solution. If I am missing a / in rendered html for src="media/..", I added it manually. In view:

    if not settings.DEBUG:
        image_url = "/" + image_url

Now I don't need hx-replace-url. Everything works fine.

[geoffrey-eisenbarth]

That's a much better solution than using hx-replace-url! I still feel like something is amiss in your prod settings (appending the leading slash should not be necessary). If you're happy with the solution, then I am too! But otherwise, how is image_url defined in the view that returns the partial?

EDIT: (btw, feel free to join us on in the #django-htmx channel of the discord server if you have future questions!)

[kkvero]

appending the leading slash should not be necessary

I feel so too.

how is image_url defined in the view that returns the partial?

The view that gets the partial does not define image_url, url gets passed to the view as arg from template that calls that view.

• Template 1:
  <a hx-get="{% url 'display_image' photo.url photo.width photo.height %}"

• View:

def display_image(request, image_url, image_width, image_height):
    # if not settings.DEBUG:
    #     image_url = "/" + image_url
    data = {
        "image_url": image_url,
        "image_width": image_width,
        "image_height": image_height,
    }
    return render(request, "partials/display-image.html", data)

• Template 2 (partials/display-image.html).

I printed out the contents of image_url in view and in "template 2". It is /media/... (But then I checked in dev only and in dev everything worked anyway.) I also queried the DB in dev and in prod, the stored values are absolute: /media/..

I had thoughts that maybe I am supposed to use the more sophisticated django stuff like get_absolute_url on the model or return redirect(reverse .. in the view. But I am not there yet.

Anyway looks like the issue is not about htmx.

#django-htmx channel

Great! Thank you.