I’m glad you hacked your way to a solution that works for you!
As for as a better approach, I imagine it would be to make the CSS rule as a class selector and change the way you “encode” what you want with the URL to use URL query instead of an anchor tag.
Something like:
And then in your render-image.html, you parse the url with the Hugo url parsing tools and you get the clean source path, and you have a flag now you can use to add that specific class to your img tag if you had included it in the url. That seems the cleaner way to accomplish it. @jmooring has a great approach he’s created using the render hook and the url query arguments. Is it possible to use attribute lists with render hooks? - #9 by jmooring
The approach you describe is fine for your situation, but it’s brittle, that’s all.