# Single image in displayHTML

**URL:** <https://community.blockcerts.org/t/single-image-in-displayhtml/1761>\
**Category:** Technical\
**Created:** [March 5, 2019, 2:25pm UTC](https://community.blockcerts.org/t/single-image-in-displayhtml/1761 "2019-03-05T14:25:02Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![jc.chartrand](https://avatars.discourse-cdn.com/v4/letter/j/ea666f/32.png) [@jc.chartrand](https://community.blockcerts.org/u/jc.chartrand)\
**Post date:** [March 5, 2019, 2:25pm UTC](https://community.blockcerts.org/t/single-image-in-displayhtml/1761/1 "2019-03-05T14:25:03Z")

</div>

Is there any reason why one couldn’t put a single image tag into displayHTML that simply shows the whole certificate?

So, say you were issuing a blockcert for a bachelor’s degree, could you generate an image that exactly matched the paper copy of the degree, and put the base64 version of that image into an ![]() tag?

That way the digital version (the blockcert) would look exactly like the paper version, and you’d hopefully insulate the blockcert from differences across browsers or changing HTML specs, which might be a problem if you had more elaborate HTML in displayHTML.

---

<div class="post-metadata">

**Author:** ![davidlj\_btca](https://sea2.discourse-cdn.com/flex016/user_avatar/community.blockcerts.org/davidlj_btca/32/543_2.png) [@davidlj\_btca](https://community.blockcerts.org/u/davidlj_btca)\
**Post date:** [March 11, 2019, 1:57pm UTC](https://community.blockcerts.org/t/single-image-in-displayhtml/1761/2 "2019-03-11T13:57:41Z")

</div>

LearningMachine is doing exactly what you say as their Bitocoin mainnet example present in the test fixtures inside the [cert-verifier-js](https://github.com/blockchain-certificates/cert-verifier-js) repo shows:

[https://raw.githubusercontent.com/blockchain-certificates/cert-verifier-js/master/test/fixtures/mainnet-valid-2.0.json](https://raw.githubusercontent.com/blockchain-certificates/cert-verifier-js/master/test/fixtures/mainnet-valid-2.0.json)

---

<div class="post-metadata">

**Author:** ![jc.chartrand](https://avatars.discourse-cdn.com/v4/letter/j/ea666f/32.png) [@jc.chartrand](https://community.blockcerts.org/u/jc.chartrand)\
**Post date:** [March 13, 2019, 4:05pm UTC](https://community.blockcerts.org/t/single-image-in-displayhtml/1761/3 "2019-03-13T16:05:35Z")

</div>

Thanks David,

That’s a good example of how to embed images in the HTML, but the HTML you pointed me at actually has several sections, with three images and formatted text:

```
<section class="image" style="margin-top:12px">
	<section style="width:100%;display:inline-block;">
		<img src="data:image/png;base64,iVBO" style="max-width:100%;height:auto;width:inherit;display:block;float: left;width:6em" />
	</section>
</section>
<section class="text" style="margin-top:24px;width:100%;display:inline-block;">
	<span style="display:block;font-family:Helvetica, sans-serif;font-weight:bold;font-size:2.5em;text-align:left;text-transform:none;color:#4e5f6b;margin:0 auto;width:100%">
		Brandon Sanders, PhD.
	</span>
</section>
<section class="text" style="margin-top:12px;width:100%;display:inline-block;">
	<span style="display:block;font-family:Helvetica, sans-serif;font-weight:normal;font-size:1em;text-align:left;text-transform:none;color:#4e5f6b;float: left;width:100%">
		CERTIFIED SECURITY EXPERT &amp; SYSTEM DESIGNER
	</span>
</section>
<section class="image" style="margin-top:12px">
	<section style="width:100%;display:inline-block;">
		<img src="data:image/png;base64,iVBO" style="max-width:100%;height:auto;width:inherit;display:block;float: left;width:11em" />
</section>
</section>
<section class="text" style="margin-top:0px;width:100%;display:inline-block;">
	<span style="display:block;font-family:Helvetica, sans-serif;font-weight:normal;font-size:1.25em;text-align:left;text-transform:none;color:#4e5f6b;margin:0 auto;width:100%">
		Software developer with 15 years of experience. Broad foundation in algorithms, mathematics, distributed systems, and scalability. Certification renewed by Federation of CompSci based in Washington D.C on December 2017.
	</span>
</section>
<section class="image" style="margin-top:24px">
	<section style="width:100%;display:inline-block;">
		<img src="data:image/png;base64,iVB..." style="max-width:100%;height:auto;width:inherit;display:block;margin:0 auto;width:100%" />
	</section>
</section>
<section class="text" style="margin-top:24px;width:100%;display:inline-block;">
	<span style="display:block;font-family:Helvetica, sans-serif;font-style:italic;font-size:1.25em;text-align:center;text-transform:none;color:#4e5f6b;margin:0 auto;width:100%">
		This sample certificate is for educational purposes only.
	</span>
</section>

```

I wanted to instead use something more like:

```
<section class="image" style="margin-top:10px">
    	<section style="width:100%;display:inline-block;">
    		<img src="data:image/png;base64,iVB..." style="max-width:100%;height:auto;width:inherit;display:block;margin:0 auto;width:100%" />
    	</section>
</section>

```

and nothing more. Just a single image that is an exact copy of the corresponding paper certificate. The image would in fact be derived from the PDF used to print the certificate.

I was more asking if anyone could see any reason not to do this, or had experience doing such a thing.

Nonetheless, I do appreciate your reply.

James

---

<div class="post-metadata">

**Author:** ![davidlj\_btca](https://sea2.discourse-cdn.com/flex016/user_avatar/community.blockcerts.org/davidlj_btca/32/543_2.png) [@davidlj\_btca](https://community.blockcerts.org/u/davidlj_btca)\
**Post date:** [March 26, 2019, 10:13am UTC](https://community.blockcerts.org/t/single-image-in-displayhtml/1761/4 "2019-03-26T10:13:12Z")

</div>

Hi James,

We’ll probably deal with this in the next month, so I’ll provide you feedback about it after that!

😄

---

<div class="post-metadata">

**Author:** ![jc.chartrand](https://avatars.discourse-cdn.com/v4/letter/j/ea666f/32.png) [@jc.chartrand](https://community.blockcerts.org/u/jc.chartrand)\
**Post date:** [March 29, 2019, 6:17pm UTC](https://community.blockcerts.org/t/single-image-in-displayhtml/1761/5 "2019-03-29T18:17:19Z")

</div>

Great - thank you David. James

---

<div class="post-metadata">

**Author:** ![dekts](https://avatars.discourse-cdn.com/v4/letter/d/977dab/32.png) [@dekts](https://community.blockcerts.org/u/dekts)\
**Post date:** [March 18, 2020, 7:14am UTC](https://community.blockcerts.org/t/single-image-in-displayhtml/1761/6 "2020-03-18T07:14:15Z")

</div>

I do not know but whenever I add my base64 image in the CSV displayHTML tag then the source display unknown in the sign certificate viewer.

when I have check the test.json first with the added base64 image then works well when decoded.

after created the unsigned certificate and again take image base64 portion from json and decode it in the same tool but not worked because of `\n` so when I have removed the \n from base64 then the logo display but only half logo displayed