I'm using Thymeleaf with Spring Boot.
I'm trying to send a mail with a html template.
The mail is ok, the variable thymeleaf in the template are replace it's perfect, but, my only one problem is that the image are not displayed. It's just like if the image doen't exist.
The html template and the image ( Picture.png ) are on the same folder.
In the template I have try these multiples tries :
<img src="Picture.png" />
<img src="#{Picture.png}" />
<img th:src="|cid:${imageName}|" /> // by passing the "Picture.png" in the imageName variable
<img th:src="#{Picture.png}" />
But nothing is working, I need help thanks !
I answer my own question because I suceed to resolve the problem :
Just put like that <img src="cid:imageName"/> in the html file
Checkout the Thymeleaf's documentation especially the part for context-relative and server-relative url patterns.
If your project root directory is called myapp and you deploy it into a Tomcat server, your application will probably be accessible as http://localhost:8080/myapp, and myapp will be the context name.
So assuming the folder containing both the image and the html is located at:
myapp/resource/assets/(html and Picture.png exists)
the correct code to dynamically fetch the image is:
<img src="resource/assets/Picture.png" th:src="#{resource/assets/Picture.png}" />
I'm trying to display image in my jsp from my local disk inside a web project. My Code is:
<img src="C:/Documents and Settings/chandhu/HelloWorld0.png" width="80px" height="100px" style="margin-left: 20px;"/>
After I run my application the image is not getting displayed. In src attribute it is additionally adding some source as mentioned below:
<img src="http://localhost:8080/Ecm/C:/Documents and Settings/chandhu/HelloWorld0.png" width="80px" height="100px" style="margin-left: 20px;"/>
Can anyone tell me what I am doing incorrectly?
You can't do this way.. It should be in reach of container. or you can write a servlet which will read disk file and make HTTPResponse
You mentioned using jsp , therefor i think you are working with web application ,in your WEB-INF folder create a directory named image or as you needed and put your image there .
Now you can access that from code as :
String fullPath = servletContext.getRealPath("/WEB-INF/image/" + image_file_name+ ".jpg");
InputStream is = new FileInputStream(fullPath );
Or you may use :
InputStream stream = this.getClass().getResourceAsStream("/WEB-INF/image/image_file_name.jpg");
to read stream directly .
related question may help you :
JPEG file in WEB-INF returned as null by ServletContext#getResource()
Cant retrieve an images from the WEB-INF folder ussing classLoader.getResourceAsStream()
I've seen multiple questions that are very similar to this one, so I was hesitant at first to post it. But nothing suggested resolved my issue and I can't seem to figure out what's wrong myself.
For a project I made for one client they wanted to ability to convert quotes for their customers (generated using an online form) to PDFs. Simple enough. As the entire project was in PHP, I used the following simple process:
Save the quote as a temporary HTML file
Use WkHTMLtoPDF to convert the HTML file to a PDF
Output this PDF file
Clean up (delete temporary files)
This worked until they changed servers. The new server has a firewall.
At first the PDF conversion step was returning a firewall page saying that the server couldn't make outbound connections. To resolve this I fed the HTML file directly instead of linking to it (/var/www/mysite/temp/18382.html instead of www.example.com/temp/18382.html). This converted the HTML, but the firewall prevented the loading of CSS and images
I can overcome the CSS by simply embedding it directly in the site instead of linking to it (using the <style> tags), but this doesn't work for images
I tried using relative links first. I changed <img src="http://www.example.com/temp/image.jpg" /> to <img src="./image.jpg" />. This didn't work.
Next I tried <img src="file:///var/www/mysite/temp/image.jpg" /> but this didn't work, either
I read around and look through the WkHTMLtoPDF manual and I tried several different command line arguments like --enable-local-file-access, --enable /var/www/mysite/temp/, and --images but nothing seems to fix it
In my case - wkhtmltopdf version 0.12.2.1 (with patched qt) - adding a base tag to the head section with the absolute path made sure images and css did get loaded.
<html>
<head>
...
<base href="http://www.example.com/">
<link href="/assets/css/style.css" rel="stylesheet">
...
</head>
If your are on linux check the ownership of your images. For windows you will find some info on http://code.google.com/p/wkhtmltopdf/wiki/Usage.
I tried different kind of paths to the image:
<img src="file:///var/www/testpdf/flowers.jpg"><br>
<img src="./flowers.jpg"><br>
<img src="flowers.jpg"><br>
<img src="/var/www/testpdf/flowers.jpg"><br>
all images are showed correct. I didn't use any command line arguments
(only wkhtmltopdf /var/www/testpdf/makepdf.html makepdf.pdf)
For Windows you need to use absolute file system paths in your markup. For instance:
<link href='C:\Projects\Hello\Hello.Web\Content\custom\home.css' rel='stylesheet' type='text/css' />
! not http://localhost/Hello.Web/Content/custom/home.css
In order to have them embed, you can insert base64 encoded images like :
<img src="data:image/png;base64,someBase64content"/>
When a browser renders your HTML, it uses a relative path (sometimes with a URL at the beginning of it) like this:
<img src="/static/images/some_picture.png">
<img src="http://www.example.com/static/images/some_picture.png">
But when WkHTMLtoPDF is running on your server, it's interfacing with your local files directly through the filesystem, not through a web server. So for local files, unlike a browser, WkHTMLtoPDF wants the actual filepath:
<img src="/var/www/myapplication/static/images/some_picture.png">
(This worked for me with Python Flask)
on Windows use path: file:///C:/some/dir/some/file.img (notice the tripple /)
It is may be too late :)
BTW, just add this config into your options in last.
options = {'enable-local-file-access': None}
pdfkit.from_string(html, 'filename.pdf', options=options)
After taking in everyone's kind assistance from here and around the net, I discovered something that worked for me - coding in asp.net (c#).
I needed to access the image by url (not file path), as the original source html still needed to be accessed. Through troubleshooting, I discovered these points.
These flags had to be passed in to the command line process:
"-q -n --disable-smart-shrinking --images --page-size A4"
URL still has to be absolute.
Image must be a jpg! I was originally trying to do a gif, to no avail.
I discovered adding "--enable-local-file-access" didn't help, as it requires '\' slashes in the image path instead of '/' slashes, which doesn't help if you also hope to use the source html (in some browsers). Also, if you need to access the local file system, you need to provide an absolute path, as it reads straight from the root and goes from there.
Hope this helps others.
Cheers
-y
I know this is quite old topic, but I've just faced the same issue and maybe it will help to someone.
I tried different approaches, like css background image and using string as base64 encoded data image. Sometimes it helped, sometimes not - no particular rule I could found.
It turned out that upgrading library wkhtmltopdf solved the problem.
I was using version 0.12.0 and upgraded to 0.12.3
What fixed it for me was removing the references to my CSS files. It turned out I had was setting img { max-height: 100%; } in an otherwise-empty div so that was being interpreted as max-height: 0.
So check out your CSS and there might an issue there. This worked:
<div><img src="image.png"/></div>
And running command line in the directory with image.png:
wkhtmltopdf example.html example.pdf
But this does not:
<div><img src="image.png" style = "max-height: 100%; "/></div>
Because the image gets squished to 0 height. Firefox seems to correct this so it wasn't obvious.
This is probably due to SE Linux or firewall rules that prevent you from going out on the internet and back to your own server. You can update your host file to point calls to your domain back to your machine's home address.
make sure you have the latest version of wkhtmltopdf with patched qt.
you can implement a helper that flask jinja uses it to distinguish if the template is for rendering or only generating pdf, or maybe both.
let' say that tmpl_bind is the data object to bind in the template, add a new key tmpl_bind["pdf"] set it True or False.
when using wkhtmltopdf or pdfkit, add enable-local-file-access to options object.
now create a helper function called static_file
def static_file(filename, pdf=False):
# wkhtmltopdf only read absolute path
if pdf:
basedir = os.path.abspath(app.root_path)
return "".join([basedir, "/static/", filename])
else:
return url_for('static', filename = filename)
as we say, wkhtmltopdf for some os only read files when you include their absolute path. Note that you may add or remove parts from the app.root_path, according to your app structure, but this will work in most of cases.
in app configuration add this line after importing static_file function if it is in another file
app.jinja_env.globals['static'] = static_file
finally, in the template import files, images by calling the static_file helper function
<link href="{{ static('css/style.css', pdf) }}" rel="stylesheet" />
<img src="{{ static('assets/images/logo.svg', pdf) }}" class="logo">
For me the problem was resolved by doing two things:
1: In your app/config/config.yml
- Under the knp_snappy
- For the option temporary_folder write ./
- i.e: temporary_folder: ./
2: Now in your html.twig pages remove the asset and write:
From: <link rel="stylesheet" type="text/css" href="{{ asset('css/default_template.css') }}">
To: <link rel="stylesheet" type="text/css" href="css/default_template.css">
And after that, it worked for me.
Hopefully i've helped somebody. Thank you !
To generate your pdf with your images or styles you need to provide the server path as follows:
<img src="https://upload.wikimedia.org/wikipedia/...image.png" />
<link href="http://localhost:8080/css/file.css" media="all" rel="stylesheet" type="text/css" />
Note this second link, it's the local address to your stylesheet, or could be a remote like the first link. The file path didn't work for me, only the server path to the resource.
Ps: In my situation, I am using spring boot in Intellij IDE and I needed to invalidate cache of IDE and not run in debug mode in order to work, otherwise it may be not update things.
URL of images must be absolute not relative.
Check this working example in a twig template:
<img src="{{ absolute_url(asset('images/example.png')) }}"/>
Just spent a few days on getting a Flask/ Blueprint /static file/ css to be read by wkhtmltopdf, so I thought I'd share what I learned.
Win 7, Flask 0.12 on Python 3.4.4, using Pycharm pro, latest pdfkit and wkhtmltopdf.
download the wkhtmltopdf here
install it -mine installed on:
C:\Program Files\wkhtmltopdf\bin\wkhtmltopdf.exe
right after you import pdfkit into your flask routes.py script ,insert the lines:
path_wkthmltopdf = r'C:\Program Files\wkhtmltopdf\bin\wkhtmltopdf.exe'
config = pdfkit.configuration(wkhtmltopdf=path_wkthmltopdf)
(note the "r" in the first line here !! )
when you use pdfkit in a route, add ",configuration = config" as an argument, eg:
pdfkit.from_string(html_text, output_filename, configuration = config)
this tells pdfkit where to look for wkhtmltopdf. Yes, you need to do this.
NOW in your flask BASE TEMPLATE add , _external = True to your css route, eg:
(this will keep wkhtmltopdf from throwing error cant find css)
NOW (serious bootstrap template juju warning):
go into your flask /external libraries /site-packages /flask_bootstrap /templates /base.html template and:
a. fix CSS link:
<link href="{{bootstrap_find_resource('css/bootstrap.css', cdn='bootstrap')}}" rel="stylesheet" media="screen">
add "http:" so it looks like:
<link href="http:{{bootstrap_find_resource('css/bootstrap.css', cdn='bootstrap')}}" rel="stylesheet" media="screen">
b. fix JS links:
add "http:" so the JS links look like:
<script src="http:{{bootstrap_find_resource('jquery.js', cdn='jquery')}}"></script>
<script src="http:{{bootstrap_find_resource('js/bootstrap.js', cdn='bootstrap')}}"></script>
and with all this
your flask html to pdf conversion
using pdfkit and wkhtmltopdf
should run without errors.
note: I moved to flask from PHP and if you are a flask-er, please post your solutions up here. The flask community is MUCH smaller than the PHP community so we all have to pitch in.
opt = dict()
opt["orientation"] = "landscape"
opt["enable-local-file-access"] = ""
config = pdfkit.configuration(wkhtmltopdf='/usr/bin/wkhtmltopdf')
enable local file access to access images
I put the user uploaded image files on separate disk partition on my local dev server(OS windows) which is outside of project folder. I need to access those image files in html pages of web app.
I tried out giving paths like: http://localhost:8080/C://tmp/thumbnails/pl_2001.JPEG but no help. Image is not fetched. How to properly access such files in html pages ?
You will have to use rewrites for this so you don't display sensitive folder names.
if you are using php you can use .htaccess rewrites for a slug something like images/someimage.mime and split/get what's after images/ and have a php function that takes the filename and makes sure it exists and if you want you can check if its a valid mime then send a header to say its a image/somemime so the browser can display the image instead of gibberish it will display without it.
$filename = "C://tmp/" . $file;
if(file_exists($filename)){
$img = getimagesize($filename);
if(in_array($img['mime'], array('jpg','jpeg','gif','png','etc'))){
header("Content-type: image/" . $img['mime']);
readfile($filename);
}else{
//default image
}
}else{
//default image
}
I haven't tested this but it should give you a idea on getting you started. If this isn't the language you are looking for try searching for something similar for your language you are using.
I've generated an image tag like below:
<td>
<img src='#item.SourceAddress' alt="#item.Description"/>
</td>
and the result is somrthing like this:
<td>
<img src='C:\Users\leo\Workspace\Team Foundation Server\Sources\HRS\HRS\App_Data\user\Photos\test.jpg' alt="desc"/>
</td>
The problem is I only see blank space and no image at all(in firefox I only see alt text). the path is correct. I copied the img tag itself into another html file and I see the image crystal clear.
somrthing that might help: I opened the source with firefox and when I clicked on source of image I got following error:
Firefox doesn't know how to open this address, because the protocol
(c) isn't associated with any program.
and sorry for terrible english by the way.
Edit: I Edited the title. It is make more sence now!
This may be due to you providing a local path name (i.e. a directory in C:) rather than a relative path via Razr. If you start debug in Firefox then the console output sometimes eludes to this.
You could try something similar to:
<img src="#Url.Content(Item.SourceAddress)" alt="desc"/>
And check that SourceAddress is in the format of:
~/MyImages/Photos/test.jpg
Also worth checking all the obvious things like double quotes over single quotes etc.
Finally found out what is the problem!
First of all I used App_Data Folder to store files. this folder is special purpose and is used to store some special database files and IIS wont give direct access to this folder. and I had to make another folder like Image and store files there.
Second problem is I gave the path directly from Root (C:\...). The Web Browser doesen't have access to the Server File System Directly (Due to some security reasons). Because of this I had to gave the path relative address. The absolut path should be used by Server Code only and not in html source.
I managed to convert absolute path to relative like below:
`public static class HttpServerUtilityExtensions
{
public static string RelativePath( this HttpServerUtilityBase utility, string path, HttpRequestBase context )
{
return path.Replace( context.ServerVariables[ "APPL_PHYSICAL_PATH" ], "/" ).Replace( #"\", "/" );
}
}`
and:
``