Image Tag from local-files in HTML

Good evening, I’m facing the following problem:
I can’t load .jpg images from the /home/username/local-files folder (but Read Binary Files is fine), tell me how to implement this?
P.S. Any link to an image from the web in HTML is displayed

P.S.1 This line represents the name of the jpeg image located in the /home/username/local-files/ folder
${item.json["text"].slice(0, -4)}

Hi @FIRE_TIKTOK, the display issue should be fixed with the next release:

As for your other problem I am not fully sure I understand. It seems like you are serving HTML. Does ${item.json["text"].slice(0, -4)} resolve to a valid location following the file URI scheme? Where exactly are you missing the image, is that on the same machine the image lives on?

1 Like

Thanks for the answer, I’ll try to explain:
Yes, the files live on the same machines as in n8n.
For example, in the local-files folder there is a file image-example-001.jpg
I am trying to display it in HTML
Those. in my case :
<div class="me"><img src="${item.json["text"].slice(0, -4)}"></div>
Same as :
<div class="me"><img src="image-example-001.jpg"></div>
If I upload image-example-001.jpg to any hosting, then everything is displayed
For example:
<div class="me"><img src=""></div>
But what about images stored in a local folder, as if the Code node, when generating HTML, cannot read or find them

If your webserver (or browser) can’t find <img src="image-example-001.jpg"> (for example because the HTML file you’re generating doesn’t live in the same folder) you might need to specify the full path to the image file.

1 Like

Thanks, here’s a screenshot of my Workflow:

Those. a .txt file is read from the local-files folder, then an HTML page is converted and generated, which is saved to the local-files folder
In HTML, text is displayed, images uploaded via image hosts are displayed, but .jpg files from the local-files folder are not

Tell me which path is correct if the folder is located in /home/username/local-files?
I tried different options:

<img src=“./local-files/${item.json[“text”].slice(0, -4)}”>

<img src=“/local-files/${item.json[“text”].slice(0, -4)}”>

<img src=“/files/${item.json[“text”].slice(0, -4)}”>

… But everything is unsuccessful …

I am not familiar with HTML really, but I suspect if your file lives in /home/username/local-files an absolute path such as /home/username/local-files/myFile.jpg would do the job.

I tested an HTML file like this on my Windows machine (with the HTML file living in a different folder than the image file) and it worked fine using the Edge browser:

        <img src="C:\Users\Tom\Downloads\myImage.jpg">

But this isn’t so much a question about n8n but about how browsers deal with local files.

1 Like

Thanks, I tried to move the local-files folder from Ubuntu to Windows, put the image as you have in the example, it came out and saved the HTML-all sucessfull works, then something is wrong in the Ubuntu local-files path, in docker-compose.yml the mount is written like this:

      - ${DATA_FOLDER}/.n8n:/home/node/.n8n
      - ./local-files:/files

But as I wrote above, it reads files in Read Binary, which means the rights are set correctly

Your browser presumably run outside of your docker container, so you’d need to make sure to specify an absolute path on your host machine. Something like /my/docker/compose/folder/n8n/local-files/imagefile.jpg.

1 Like

It’s already interesting))
Thank you, but is it possible to accurately check the correct path with docker?

If your docker compose file reads ./local-files:/files, your full path would be the directory of your docker compose file with a /local-files suffix I’d think. I don’t think there is a way to read the host path from inside your docker container though, the docker container will only be available of the path inside the container (/files).

To avoid ambiguities, you could consider using an absolute path in your docker compose file (/my/full/host/path:/files) rather than the . notation for the current directory.

1 Like

Thank you, in docker-compose I changed:
- /home/<username>/local-files:/files

But here I should in this case, how to correctly write the path to the image?


<img src="/home/<username>/local-files/${item.json["text"].slice(0, -4)}">

The basic structure /home/<username>/local-files/filename.jpg looks good to me. Is it working for you?

1 Like

Thank you for the answers, unfortunately this design did not work either … (((
I also tried to prescribe instead of /home/username/local-files/image.jpg


Unfortunately the result is the same :frowning:

Maybe it’s easier to upload images to a folder on Google Drive and fumble files from there? Unfortunately I’m running out of options, on Windows the local path does work…

Perhaps you can start by sharing a reproducible workflow? A node mocking the input data and the Code node from your screenshot building the HTML might already do the job?

Plus, if you could confirm the exact response you’re getting from your workflow that’d be helpful, because right now I am still not 100% sure how the resulting file path looks like in your HTML file.

With this variant of writing the tag, I get the following generated HTML-file


Is this a messenger you’re using the image links in? This service would most likely not have access to your local files and/or does not bother with fetching/rendering local image files. So, I suspect for this to work you’d need to upload your images to an online location and provide a working public http/https link instead of your local file path.

This is not a messenger :)) This is a generated HTML page from a txt file of a chat backup

So how does the HTML file returned by your n8n workflow look like? Have your links been resolved properly and are the paths valid?

If you are talking about the code of the generated HTML page, then here is the piece responsible for loading images (the file names are the same as those in the local-files folder)

  <div class="me"><img src="home/james/local-files/00000004-PHOTO-2020-01-05-15-50-34.jpg"></div>
  <div class="me"><img src="home/james/local-files/00000005-PHOTO-2020-01-05-15-50-34.jpg"></div>
  <div class="me"><img src="home/james/local-files/"></div>
  <div class="me"><p class"text1">‎Hi,please upload photo
‎</p><p class="time1">15:50:36</p></div>

This looks like the leading slash is missing. So, your browser would try to look up a file in the current path under home/james/local-files/00000004-PHOTO-2020-01-05-15-50-34.jpg. Can you try adding a leading slash, so it uses /home/james/local-files/00000004-PHOTO-2020-01-05-15-50-34.jpg instead?