Prerequisites
1. SAP Crystal Reports, version for Microsoft Visual Studio
2. Visual Studio version from 2010 to 2019
We support these CR versions, please note each web server has a single CR version, which means if you have two hosting accounts with us, you may get two different CR versions provided. In order to know the exact CR version of your web server, please contact our support.
Procedures
1. choose an ASP.NET Web Application (.NET Framework) project template, name it, select location and framework, use the empty template in this demo
2. right click project name in "Solution Explorer" in VS > choose "Add" > then select "Web Form", name it as "Default.aspx"
3. right click project name > "Add" > "New Folder", name it as "images", copy your image files to this folder
4. now run your application in debug mode, the default page should show blank, make sure your images can load properly when browsing URL like
http(s)://localhost:port/images/image1.jpg
5. right click project name in "Solution Explorer" in VS > choose "Add" > then select "New Item...". In the upcoming window, choose "Reporting", select "Crystal Reports", name it. (If you do not see the "Reporting" option, maybe you have not installed CR for VS locally, please go to install it and restart your VS.)
6. in the "Report Wizard", use "Standard" mode, click "OK"
7. create a new database connection, and enter your database information
8. choose destination table, select target field, finish
9. you will see the report file was inserted with the target field default
10. in the preview window you will see the data from the database
11. right click in the blank area in the report, choose "Insert", select the "Picture..." option, browse local image files and select one to open
12. right click on Picture, choose "Format Object"
13. switch to the "Picture" tab, click the conditional-formula icon (looks like x+2) beside "Graphic Location"
14. select "Graphic Location", double click the target field, it will append the value to the editor cursor, change it to full URL
"http://localhost:62370/images/" + {images.name}
save and close
in my case, it is http://localhost:62370, your port may be different. Please note you will have to change the URL to your own domain before publishing the report to the server
15. open "Default.aspx" file, switch to "Design" mode, drag "CrystalReportViewer" to the "div" element
16. open "Default.aspx.cs" file, in Page_Load() function, add the following codes
SqlConnection connection = new SqlConnection("Data Source=xxx;Initial Catalog=xxx;User Id=xxx;Password=xxx"); // change this to your database connection string
connection.Open();
SqlCommand command = new SqlCommand("SELECT[name] FROM [xxx].[dbo].[images]", connection); // change this SQL query
SqlDataAdapter adapter = new SqlDataAdapter(command);
DataSet ds = new DataSet();
adapter.Fill(ds);
connection.Close();
ReportDocument reportDocument = new ReportDocument();
reportDocument.Load(Server.MapPath("CrystalReport1.rpt")); // load your report file, change the file name
reportDocument.SetDataSource(ds.Tables[0]);
CrystalReportViewer1.ReportSource = reportDocument;
17. run your application, the default page will show the report content, and the report loads the value of the first row of {images.name} field as the picture URL. Print to PDF will also contain all the contents in the report
Additional
if you still see the default image, it means your report cannot find the target image, check if the URL is correct or if the file exists
in the above example, the database only stores the image file name, so in Formula Editor, it is
"https://localhost:44350/images/" + {images.name}
if your database contains the full image URL, you just need to add
{images.fullUrl}
if you use "Parameter Fileds" and want to pass the parameter from application codes, for instance,
{?image}
...
reportDocument.SetDataSource(ds.Tables["table"]); // must set data source, else your report will prompt a dialog to enter image value
reportDocument.SetParameterValue("image", "full_url_to_your_image");
...
CrystalReportViewer1.ReportSource = reportDocument;