# Displaying pictures via template node

**URL:** <https://discourse.nodered.org/t/displaying-pictures-via-template-node/50999>\
**Category:** General\
**Created:** [14 September 2021 08:44 UTC](https://discourse.nodered.org/t/displaying-pictures-via-template-node/50999 "2021-09-14T08:44:46Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![nerevar](https://avatars.discourse-cdn.com/v4/letter/n/f475e1/32.png) [@nerevar](https://discourse.nodered.org/u/nerevar)\
**Post date:** [14 September 2021 08:44 UTC](https://discourse.nodered.org/t/displaying-pictures-via-template-node/50999/1 "2021-09-14T08:44:46Z")

</div>

Hello,

I'm having problems in displaying pictures on node-red dashboard.  
I'm using template node to display an image from hosting service. Image is an PNG converted from PDF, resolution is full HD (in width) without background.

However, when loaded with template it looks like its a lot smaller resolution:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/8/382019a6611104114e6390620e831899af75806b.png)

Here is the original from hosting service:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/4/a4ce92c34fabfce4094b7a64ca55543b5a389d05.png)

The code I'm using is here:  
`<img src="https://i.ibb.co/PgpCYVt/nazivi-stepeksa2.png">`  
Why does it get so bad?

Also, when trying to use a 4k resolution picture I have no control over the "container" where the picture is located. E.g. when I try to reduce its dimmensions then I get cropped picture.

I was using this codes:

```auto
<style>
.resize {
  max-width: 50%;
}
</style>
<img src="https://i.ibb.co/g4Rn4h2/stepaj-4k.png" class="resize">

```

and this:  
`<img src="https://i.ibb.co/g4Rn4h2/stepaj-4k.png" width="300" height="121">`

Is there a correct way of resizing the image without loosing the content in node-red?

Here it looks so easy, but it doesn't work in node-red:  
[https://www.quackit.com/html/howto/how\_to\_resize\_images\_in\_html.cfm](https://www.quackit.com/html/howto/how_to_resize_images_in_html.cfm)

---

<div class="post-metadata">

**Author:** ![kevinGodell](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kevingodell/32/27040_2.png) [@kevinGodell](https://discourse.nodered.org/u/kevinGodell)\
**Post date:** [14 September 2021 11:21 UTC](https://discourse.nodered.org/t/displaying-pictures-via-template-node/50999/3 "2021-09-14T11:21:54Z")

</div>

If you want to scale the img, you can use [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) in the css. And for clarification, are you using the regular template or the ui\_template in the node-red-dashboard?

---

<div class="post-metadata">

**Author:** ![nerevar](https://avatars.discourse-cdn.com/v4/letter/n/f475e1/32.png) [@nerevar](https://discourse.nodered.org/u/nerevar)\
**Post date:** [14 September 2021 13:11 UTC](https://discourse.nodered.org/t/displaying-pictures-via-template-node/50999/4 "2021-09-14T13:11:45Z")

</div>

OK I will try.

About the template, I've tried both with the same results. Now I'm using regular template + mui\_template because besides this img I also have some text + I'm sending the socketid through it to the mui\_template

---

<div class="post-metadata">

**Author:** ![nerevar](https://avatars.discourse-cdn.com/v4/letter/n/f475e1/32.png) [@nerevar](https://discourse.nodered.org/u/nerevar)\
**Post date:** [23 September 2021 10:20 UTC](https://discourse.nodered.org/t/displaying-pictures-via-template-node/50999/5 "2021-09-23T10:20:36Z")

</div>

The only method that worked for me was loading an image from filesystem using node, converting it with base64 node and then loading it from a context..

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [7 October 2021 10:20 UTC](https://discourse.nodered.org/t/displaying-pictures-via-template-node/50999/6 "2021-10-07T10:20:59Z")

</div>

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