String variable is sometimes encoded when added as a data attribute

support
1

Assuming I have the variable srcset defined as the string below:

    {{ $srcset := "/images/image-01-1440w.jpg 1440w, /images-image-01-1600w.jpg 1600w"}}

I want to then add it to an element as a data attribute. Bizarrely, it seems to URL encode the string depending on the name of the data attribute, as below.

    <h1>Encoded</h1>

    <a data-lazy-image-srcset="{{ $srcset }}"></a>
    <a data-test-image-srcset="{{ $srcset }}"></a>
    <a data-lazy-srcset="{{ $srcset }}"></a>
    <a data-test-srcset="{{ $srcset }}"></a>
    <a data-test-srcse="{{ $srcset }}"></a>
    <a data-test-src="{{ $srcset }}"></a>

    <h1>Not encoded</h1>

    <a data-test-sr="{{ $srcset }}"></a>
    <a data-srcset="{{ $srcset }}"></a>

The HTML output is as follows:

     <h1>Encoded</h1>
      <a data-lazy-image-srcset="/images/image-01-1440w.jpg%201440w,%20/images-image-01-1600w.jpg%201600w" target="_blank" rel="noopener noreferrer"></a>
      <a data-test-image-srcset="/images/image-01-1440w.jpg%201440w,%20/images-image-01-1600w.jpg%201600w" target="_blank" rel="noopener noreferrer"></a>
      <a data-lazy-srcset="/images/image-01-1440w.jpg%201440w,%20/images-image-01-1600w.jpg%201600w" target="_blank" rel="noopener noreferrer"></a>
      <a data-test-srcset="/images/image-01-1440w.jpg%201440w,%20/images-image-01-1600w.jpg%201600w" target="_blank" rel="noopener noreferrer"></a>
      <a data-test-srcse="/images/image-01-1440w.jpg%201440w,%20/images-image-01-1600w.jpg%201600w" target="_blank" rel="noopener noreferrer"></a>
      <a data-test-src="/images/image-01-1440w.jpg%201440w,%20/images-image-01-1600w.jpg%201600w" target="_blank" rel="noopener noreferrer"></a>
      <h1>Not encoded</h1>
      <a data-test-sr="/images/image-01-1440w.jpg 1440w, /images-image-01-1600w.jpg 1600w" target="_blank" rel="noopener noreferrer"></a>
      <a data-srcset="/images/image-01-1440w.jpg 1440w, /images-image-01-1600w.jpg 1600w" target="_blank" rel="noopener noreferrer"></a>

Does anyone have an idea of what is causing this?

2

I don’t know why it’s so inconsistent, but safeHTMLAttr is your friend. If it’s safe, then add that to your attribute code:

3

Interesting. In real life I’m deriving the {{ $srcset }} var by reading the names of real image files, so I can’t see any issues with using sateHTMLAttr.