读取数据库图片URL展示图片

  • 文档创建者:皮卡皮卡丘
  • 编辑次数:4次
  • 最近更新:Leo.Tsai 于 2019-07-23
  • 1. 描述

    当数据库中存有图片的工程路径时,可以通过读取该路径信息以 URL 的形式访问并展示图片。效果如下图所示:

    1.png

    2. 思路

    图片列表所在单元格公式内容为 HTML 的 <img> 标签结合获取到的图片 URL,再以 HTML 显示该单元格内容即可展示图片。

    3. 示例

    3.1 图片工程路径

    选取工程路径webapps\webroot\help\picture\store下的 1.png、2.png、3.png 作为展示图片。

    3.2 内置数据集存放路径信息

    新建内置数据集 Embedded1 存放图片工程路径信息,如下图所示:

    2.png

    3.3 模板设计

    1)选取 A1:C2 单元格。

    3.png

    将内置数据集「图片名称」字段拖入 A2 单元格,「图片路径」字段拖入 B2 单元格,如下图所示:

    4.png

    2)设置C2 单元格左父格为 B2,向下扩展,并在单元格属性>其他>高级>显示内容下选择用HTML显示内容,如下图所示:

    6.png

    3)C2 单元格添加如下公式:

    "<img style='height:160px;width:240px' src='" + B2 + "'/>"

    <img> 标签设置说明:

    height (图片高度) 为 160 像素,width (图片宽度)为 240 像素。

    src 为图片的 URL 地址,此处我们引用 B2 单元格图片路径信息。

    5.png

    4)设计好的模板如下图所示:

    7.png

    4. 效果预览

    1)PC 端预览效果:

    保存模板,点击分页预览,效果如描述中所示。

    2)移动端预览效果:

    8.jpg

    注:移动端预览时图片可能无法完整显示,可以通过调大模板单元格行高来匹配移动端图片显示高度。

    5. 已完成模板

    已完成模板可参见%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\DetailReport\读取数据库图片URL展示图片.cpt

    读取数据库图片URL展示图片.cpt


    附件列表


    主题: 报表应用
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!