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?
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="https://imagehosting-example.com/image-example-001.jpg"></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.
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:
1)
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:
<html>
<body>
<img src="C:\Users\Tom\Downloads\myImage.jpg">
</body>
</html>
But this isn’t so much a question about n8n but about how browsers deal with local files.
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:
volumes:
- ${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.
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.
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?
So?
<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?
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
/files/image.jpg
Unfortunately the result is the same 
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.
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)
<br>
<br>
<div class="me"><img src="home/james/local-files/00000004-PHOTO-2020-01-05-15-50-34.jpg"></div>
<br>
<br>
<div class="me"><img src="home/james/local-files/00000005-PHOTO-2020-01-05-15-50-34.jpg"></div>
<br>
<br>
<div class="me"><img src="home/james/local-files/00000006-PHOTO-2020-01-05-15-50-35.jp"></div>
<br>
<br>
<div class="me"><p class"text1">Hi,please upload photo
</p><p class="time1">15:50:36</p></div>
<br>
<br>
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?