Writing Base64 Image in Params

Hi All

I have looked for a few hours but I am stuck on this one
One of the Parameters for my page is a logo that is a base64 string.

The rendered page does not display the image as the src seems incorrect. I have validated the image renders correctly with online tools.

Any help is appreciated.

The page is as follows
{
“json”: true,
“type”: “company”,
“draft”: false,
“title”: “b2”,
“logo”: “data:image/jpeg;base64,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”,
“summary”: “A really cool company”,
“date”: “2018-08-14T11:31:59Z”
}

A really cool company

How does the template where you render the image look like?

The list.html looks as follows

{{ partial "header.html" . }}
{{ partial "subnavbar.html" . }}
<main>
  <div>
  {{.Render "summary"}}
   
        <ul>
            {{ range .Pages }}
                {{ .Render "li"}}
            {{ end }}
        </ul>
  </div>
</main>
{{ partial "footer.html" . }}

and the summary.html looks as follows

  `<img src='{{ .Params.logo}}'>`

I think render might assume some special characters are to be encoded and thus destroys your image.

I would use another approach. There is a function safecss that you use this way:

{{ .Params.logo | safeCSS }}

No guarantee that it works.

If it does not work my next try would be using the print function.

tried both previously and again with no luck.
The print function outputs the correct string but it is not rendering correctly.

The following works but is not ideal

<img id="tt" src='{{ print .Params.logo}}'>
<script>
    document.getElementById("tt").src="{{print .Params.logo}}"
</script>

Interesting. This script does basically what the src parameter does. I checked caniuse.com for datauri and it seems that Internet Explorer and Firefox have issues with them.

They propose you urlencode the code. I don’t think Hugo has (yet?) a function like this, but the search in this forum brought up this:

Try:

{{ .Params.logo | safeURL }}

I wonder if that has issues because your string is not a URL… If that does not work I am out of ideas :wink: We’ll wait for someone else to come to help :slight_smile:

Try removing the single quotes from the summary.html file or include the file as a partial and avoid Render.

You could also try piping to safeHTMLAttr as shown here.

FYI the single quotes were a copy issue. Did not exist in the file

However thaks for the lead I solved the issue.

I changed the .Params.logo to an array (probably did not need to)
and placed the following in my template

{{range .Params.logo}}
<img class=“mr-3” {{printf “src="%s"” . | safeHTMLAttr}} alt=“”>
{{end}}

Try:
{{ .Params.logo | safeURL }}

This solved a similar issue for me. Thanks :slight_smile:

Yes this worked for me as well :slight_smile: