读取数据库图片URL展示图片 Display image by URL

当我们要展示图片列表，可能会不知道如何根据数据库中所存的 URL，去匹配相应的图片。

这里的例子是从数据库中读取图片 URL，并显示在扩展单元格中，展示为图片列表，如图所示列表效果。

这里我们展示图片用的是 img 标签结合公式形式，获取 单元格中url,单元格以 HTML 格式展示即可实现的扩展的图片列表列。

3.1 放入图片文件

首先将我们需要将用到的图片，放到一个文件夹中，这里我们放到webapps\webroot\scripts\img目录下图片命名为 1.jpg 2.jpg 3.jpg。

3.2 查询出存储图片 URL 数据表

在数据集中查询出存储了图片 URL 的数据表

3.3单元格中操作

将我们需要的字段拖入单元格中，同时要将 URL 字段也拖入单元格中，在 URL 字段的后面一列单元格中，设置向下扩展，左父格为 C2，并在其他>高级>显示内容>用HTML显示内容，然后我们使用公式来写入这样的 HTML 标签。

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

说明：img 标签height是图片高度 160 像素宽度 240 像素，src 是图片的 URL 地址，这里我们引用的是 C2 单元格中的 URL 地址，这样因为 C2 是此单元格的左父格这样就可以根据C2 中的 URL 在 D2 单元格中显示图片并进行扩展了。

1. PC 端效果

   
   

2. H5 效果

   
   

3. App 效果

   注：App 端设置高度代码可能不兼容，可以通过调整单元格行高来设置成合适的高度

   

4. 
   

1. 图片URL列表展示demo_neizhi.cpt

2. 2.jpg

3. 1.jpg

4. 3.jpg