Image (data URI) specified in post front matter not rendering on post list page

support
1

Hi folks, a bit hung up on why an image data URI (a string) specified in the front matter of a post isn’t being rendered properly on the post list page.

post.md

---
headerImage: "data:image/svg+xml,%3Csvg+long+ugly+data+uri..."
---

list.html

...
<div class="image" style="background-image: url({{ .Params.headerImage }})"></div>
...

The headerImage renders perfectly fine on the post page, so the image shows, but on list pages I see something else like this rendered instead:

<div class="image" style="background-image: url(#ZgotmplZ)"></div>

So basically instead of getting “data:image/svg+xml,%3Csvg+long+ugly+data+uri…” on the list page I’m getting “#ZgotmplZ” for the image source. Why is that? Am I doing something wrong? Any workaround?

Right now I’m using the data URI for the post page and an image file for the list page but I’d rather the data URI be used in both places.

2

You need to declare the string as a safe HTML attribute with the safeHTMLAttr function:

1 Like
3

I had no idea about that function – thank you!! Works perfectly.

4

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.