# Display local image in pdf file

**URL:** <https://discourse.nodered.org/t/display-local-image-in-pdf-file/5702>\
**Category:** General\
**Created:** [12 December 2018 09:51 UTC](https://discourse.nodered.org/t/display-local-image-in-pdf-file/5702 "2018-12-12T09:51:46Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![hathemi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hathemi/32/3792_2.png) [@hathemi](https://discourse.nodered.org/u/hathemi)\
**Post date:** [12 December 2018 09:51 UTC](https://discourse.nodered.org/t/display-local-image-in-pdf-file/5702/1 "2018-12-12T09:51:46Z")

</div>

i'am using HTML-PDF node to create a a pdf file. i send a table in mustache template node as an input and it create me a pdf file containing that table. My problem is, i went to add a local image inside that table.  
i have tried those three lines but none of them works

> ```
> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="C:/Users/Public/img/logo.png" />1</p>
> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="C:\Users\Public\img\logo.png" />2</p>
> <p><img style="display: block; margin-left: auto; margin-right: auto;" src="C:\\Users\\Public\\img\\logo.png"/>3</p>
> 
> ```

any ideas?. And thank you.

---

<div class="post-metadata">

**Author:** ![ukmoose](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ukmoose/32/13_2.png) [@ukmoose](https://discourse.nodered.org/u/ukmoose)\
**Post date:** [12 December 2018 10:10 UTC](https://discourse.nodered.org/t/display-local-image-in-pdf-file/5702/2 "2018-12-12T10:10:41Z")

</div>

You will need to set the http configuration in your settings.js file

see [https://nodered.org/docs/configuration](https://nodered.org/docs/configuration)

---

<div class="post-metadata">

**Author:** ![hathemi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hathemi/32/3792_2.png) [@hathemi](https://discourse.nodered.org/u/hathemi)\
**Post date:** [12 December 2018 10:22 UTC](https://discourse.nodered.org/t/display-local-image-in-pdf-file/5702/3 "2018-12-12T10:22:45Z")

</div>

httpStatic in my settings.js file is already configured and works fine. i uncomment it and i fixed my static folder path.

---

<div class="post-metadata">

**Author:** ![hathemi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hathemi/32/3792_2.png) [@hathemi](https://discourse.nodered.org/u/hathemi)\
**Post date:** [12 December 2018 14:32 UTC](https://discourse.nodered.org/t/display-local-image-in-pdf-file/5702/4 "2018-12-12T14:32:41Z")

</div>

i don't know is there a difference between mustache template node and dashboard template node when i add a local image inside it.  
in dashboard template node this works and i can display my image.  
`<img src="/start.png" height="189" width="632" >`  
but, this doesn't work in mustache template node. i found nothing in my file.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [12 December 2018 15:43 UTC](https://discourse.nodered.org/t/display-local-image-in-pdf-file/5702/5 "2018-12-12T15:43:44Z")

</div>

Have you checked if the pdf node supports embedding images? Have you tried an image that is hosted publicly on the internet to test with?

---

<div class="post-metadata">

**Author:** ![hathemi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hathemi/32/3792_2.png) [@hathemi](https://discourse.nodered.org/u/hathemi)\
**Post date:** [12 December 2018 15:48 UTC](https://discourse.nodered.org/t/display-local-image-in-pdf-file/5702/6 "2018-12-12T15:48:00Z")

</div>

an image from internet works. i test it.

---

<div class="post-metadata">

**Author:** ![hathemi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hathemi/32/3792_2.png) [@hathemi](https://discourse.nodered.org/u/hathemi)\
**Post date:** [14 December 2018 10:26 UTC](https://discourse.nodered.org/t/display-local-image-in-pdf-file/5702/7 "2018-12-14T10:26:17Z")

</div>

i still can't find a solution for a local image. any help would be appreciated.

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [14 December 2018 10:30 UTC](https://discourse.nodered.org/t/display-local-image-in-pdf-file/5702/8 "2018-12-14T10:30:01Z")

</div>

My guess, without knowing which pdf node you're using, is it isn't embedding the actual image data, rather linking to it. When you use a public url, the pdf is able to load the image. When you use a relative image url like `/start.png` then when you open the pdf it has no idea what `/start.png` is relative to.

You could try changing that to a full url lie `http://localhost:1880/start.png` - but that will only work when you open the pdf on the same machine. If you want to give that pdf to someone else, you'd need that image to be hosted on the public internet.

The alternative is to investigate how to embed the image data inside the pdf rather than just link to it. I have no idea if the pdf node you're using is capable of doing that. If you let us know which node module you are using we may be able to help answer that part.

---

<div class="post-metadata">

**Author:** ![hathemi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hathemi/32/3792_2.png) [@hathemi](https://discourse.nodered.org/u/hathemi)\
**Post date:** [14 December 2018 10:38 UTC](https://discourse.nodered.org/t/display-local-image-in-pdf-file/5702/9 "2018-12-14T10:38:32Z")

</div>

> [@knolleary](#):
>
> [http://localhost:1880/](http://localhost:1880/)

i'am using this node.

> **[node-red-contrib-pdf](https://flows.nodered.org/node/node-red-contrib-pdf)**
>
> Node for node-red to render html as a pdf file or stream

---

<div class="post-metadata">

**Author:** ![hathemi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hathemi/32/3792_2.png) [@hathemi](https://discourse.nodered.org/u/hathemi)\
**Post date:** [14 December 2018 10:43 UTC](https://discourse.nodered.org/t/display-local-image-in-pdf-file/5702/10 "2018-12-14T10:43:22Z")

</div>

> [@knolleary](#):
>
> [http://localhost:1880/start.png](http://localhost:1880/start.png)

your suggestion works, and i only need to open pdf on my machine.  
Thanks a lot.

---

<div class="post-metadata">

**Author:** ![hathemi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hathemi/32/3792_2.png) [@hathemi](https://discourse.nodered.org/u/hathemi)\
**Post date:** [20 December 2018 01:30 UTC](https://discourse.nodered.org/t/display-local-image-in-pdf-file/5702/11 "2018-12-20T01:30:43Z")

</div>

why this doesn't work ???  
`<img style="display: block; margin-left: auto; margin-right: auto; width: 100%; height: 100%;" ng-src="http://localhost:1880/client/{{payload.name}}/name.png"/>`  
the image doesn't show up in my pdf !!!

---

<div class="post-metadata">

**Author:** ![hathemi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hathemi/32/3792_2.png) [@hathemi](https://discourse.nodered.org/u/hathemi)\
**Post date:** [20 December 2018 02:01 UTC](https://discourse.nodered.org/t/display-local-image-in-pdf-file/5702/12 "2018-12-20T02:01:36Z")

</div>

i have found a solution  
i just concatinate the src of image in function then send it to my template.