How to Prevent {{col.id}} from Being Escaped in data-ng-src?

[efi_josh]

Hello everyone,

I am encountering an issue with Hugo where I am trying to dynamically bind data to the data-ng-src attribute, like this:

<label data-ng-attr-for="{{"{{col.id}}"}}">
    <img class="sticker" data-ng-src="{{"{{col.id}}"}}.png" alt="filled" />
</label>

However, Hugo is escaping {{col.id}}, turning it into %7b%7bcol.id%7d%7d.png, which prevents the image from being displayed correctly. The generated HTML looks like this:

<label data-ng-attr-for="{{col.id}}">
    <img class="sticker" data-ng-src="%7b%7bcol.id%7d%7d.png" alt="filled" />
</label>

Things I Have Tried:

1. Directly using the {{"{{col.id}}"}} syntax, but it still gets escaped.
2. Trying safeHTML and html pipelines, but the issue persists.
3. Manually inserting the dynamic {{col.id}} value in the code, but Hugo seems to always escape attributes like src and href.

Expected Solution:

I want to prevent Hugo from escaping {{col.id}} within data-ng-src without resorting to JavaScript. Is there a way to render the dynamic value correctly without it being escaped into %7b%7bcol.id%7d%7d?

Any suggestions or solutions would be greatly appreciated!

Thank you for your help!

[davidsneighbour]

something like {{ printf "{{%s}}" col.id }}

might help. Have a look at printf which you can use to “print complicated stuff”. Another way would probably be to replace the {{ separator with your own separators in the angular script you are using. I remember it having a config option where you could exchange it into [[ or anything and then your Golang-template-tags wouldn’t clash with angular notation anymore.

Using printf and safeHTMLAttr should work though.

[chrillek]

Putting together what @davidsneighbour said, I’d do something like this:

<img class="sticker" {{printf "data-ng-src=%s.png" "{{col.id}}" | safeHTMLAttr}} …>

[efi_josh]

Thank you very much. I have successfully resolved the issue