Reload src in <img> tag

[davidjr82]

I have one image with its src:

<img src="/my-image-url">

I want this image to be reloaded when the user clicks in the image. Is it possible to have this behavior in htmx without returning the whole img tag in the response, but just to reload the src?:

Something like this:

<img hx-get="/my-image-url" hx-trigger="click">

I would like to avoid a new endpoint just to return the img tag:

<a hx-get="/my-image-wrapper-url" hx-trigger="click, anyotherevent">
    <img src="/my-image-url">
</a>

[matiboy]

Hi @davidjr82

This codepen suggests one solution using hx-on::after-request and the internal event.detail. The mock server responds only with the url

Hope this helps

[davidjr82]

It helps, thanks!

[davidjr82]

Although this solution is valid, it still forces to create 2 endpoints, in the codepen, "/demo" and the "/image-url". The perfect solution would have only the "/image-url" endpoint, and just reload the src in the img tag. But I guess it is easy to do with vanilla javascript instead of htmx.

Thanks!

[matiboy]

Hi @davidjr82 I'm not sure what you mean. There is only one endpoint (the one called /demo) which returns the new image url. What would /image-url return?

Basically hx-on::.... is pretty much Vanilla JS but with clear Localization of Behavior

Anyway, let me know if I can clarify the above example if it doesn't do what you expected.

[davidjr82]

Yes, that hx-on is basically Vanilla JS, agree on that.

About the 2 urls, in your example you have /demo that return a string with an url with the image https://placehold.co.... So you have 2 endpoints (/demo and https://placehold.co...) In a real example, /demo returns the actual image, so it would be something like this:

<img hx-get="/demo" hx-swap="none" hx-target="this" hx-on::after-request="js:updateImgSrcFromResponse()" src="/demo" />

Here my question would be how to reload the img itself directly. In my real case, for other reasons, at the end I have to use 2 endopoints, so I used your solution, so thanks for your support!