企业官网建设流程全解析

导航：LuckReport专栏

本文转载自 W3Cschool，原文链接：ureport2加载图片，版权归原平台所有，仅用于技术交流学习，禁止商用。

一、快速了解

项目简介

Luck-Report 是一款基于开源项目 UReport2 重构的 Java 高性能报表引擎，通过迭代单元格可以实现任意复杂的中国式报表。相较于 UReport2，Luck-Report 在技术架构上进行了全新升级，后端基于 SpringBoot 框架开发、前端采用 Vue 框架构建，技术选型贴合当下主流项目开发标准，可精准适配各类实际开发需求。

Luck-Report 提供了全新的基于网页的报表设计器，可以在 Chrome、Firefox、Edge 等各种主流浏览器运行（IE 浏览器除外）。使用 Luck-Report，打开浏览器即可完成各种复杂报表的设计制作。

Luck-Report 基于 Apache-2.0 开源协议开源

在线体验

• 体验地址：https://www.quzhe.top/luck-report/report/designer
• 源码地址：https://gitee.com/LuckyPools/luck-report
• 文档地址：https://www.quzhe.top/luck-report-blog/report

二、 加载图片

在 Luck-Report 当中，选中目标单元格，点击工具栏上的插入图片按钮，就可以插入图片，如下图所示：

插入图片后，默认只显示图片的示意图，这是因为我们要加载的图片可以是静态的，也可以是动态的，所以报表模版中以示意图的形式显示。选中图片所在单元格就可以在属性窗口中设置图片相关属性，可以看到，对于图片的来源来说，有两个选项，如下表所示：

ImageProvider 接口​

前面介绍了，Luck-Report 默认只支持以 classpath: 开头，或以 / 开头存储在文件系统里的文件，如果我们需要取其它位置的图片，比如取存储在数据库中的图片，可以通过实现 ImageProvider 接口实现，该接口源码如下：

package com.luck.report.core.provider.image; import java.io.InputStream; public interface ImageProvider { InputStream getImage(String path); boolean support(String path); }

在实现该接口时，我们需要为新的图片路径定义一个前缀，比如存储到数据库中我们可以以 db: 作为前缀，比如：db:001，表示存储在数据库中，ID 为 001 的图片，具体实现方式可以参照 Luck-Report 中提供的默认的支持 classpath: 和 / 前缀的 ImageProvider 实现类，默认的 DefaultImageProvider 接口实现类源码如下：

package com.luck.report.core.provider.image; import com.luck.report.core.exception.ReportComputeException; import org.springframework.beans.BeansException; import org.springframework.context.ApplicationContext; import org.springframework.context.ApplicationContextAware; import org.springframework.util.ResourceUtils; import org.springframework.web.context.WebApplicationContext; import java.io.FileInputStream; import java.io.IOException; import java.io.InputStream; public class DefaultImageProvider implements ImageProvider, ApplicationContextAware { private ApplicationContext applicationContext; private String baseWebPath; @Override public InputStream getImage(String path) { try { if (path.startsWith(ResourceUtils.CLASSPATH_URL_PREFIX) || path.startsWith("/WEB-INF")) { return applicationContext.getResource(path).getInputStream(); } else { path = baseWebPath + path; return new FileInputStream(path); } } catch (IOException e) { throw new ReportComputeException(e); } } @Override public boolean support(String path) { if (path.startsWith(ResourceUtils.CLASSPATH_URL_PREFIX)) { return true; } else if (baseWebPath != null && (path.startsWith("/") || path.startsWith("/WEB-INF"))) { return true; } return false; } @Override public void setApplicationContext(ApplicationContext applicationContext) throws BeansException { if (applicationContext instanceof WebApplicationContext) { WebApplicationContext context = (WebApplicationContext) applicationContext; baseWebPath = context.getServletContext().getRealPath("/"); } this.applicationContext = applicationContext; } }

ImageProvider 接口实现类定义完成后，我们只需要将其配置到 Spring 上下文中，Luck-Report 会自动检测到并加载，这样通过自已实现 ImageProvider 接口，就可以加载任意位置的图片。