[SOLVED] Writing Base64 Image in Params


#1

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


#2

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


#4

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}}'>`

#5

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.


#6

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>

#7

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.

https://caniuse.com/#feat=datauri

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:


#8

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.


#9

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}}


#10

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

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