Question

我在网页上以卡片的形式显示一个列表，但图像没有显示 - 只有一个灰色圆圈。这是我对动态列表的查询：

SELECT null as level_value, 
   TITLE as label, 
   null astarget, 
   null as is_current, 
   IMG_PATH as image, 
   'width="40" height="40"' image_attribute, 
   TITLE as image_alt_attribute,
   DECRIPTION as attribute1
FROM  TABLE1
ORDER BY TITLE

我也尝试过：

SELECT null as level_value, 
   TITLE as label, 
   null astarget, 
   null as is_current, 
   '<img src="' || IMG_PATH || '"/>' as image, 
   'width="40" height="40"' image_attribute, 
   TITLE as image_alt_attribute,
   DECRIPTION as attribute1
FROM  TABLE1
ORDER BY TITLE

我在检查页面时注意到APEX将我的图片标记添加到span的类中：

<span class="t-Icon <img src='my image path' />">

而不是仅仅将图像添加到卡

Answer 1

我找到了解决方案。实际上有两个解决方案。

1）修改动态列表以使用CARD_INITIALS和属性

SELECT null as level_value, 
  TITLE as label, 
  null astarget, 
  null as is_current, 
  IMG_PATH as CARD_INITIALS, 
  'width="40" height="40"' image_attribute, 
  TITLE as image_alt_attribute,
  DECRIPTION as attribute1,
  '' as attribute2,
  '<img src="' || IMG_PATH || '"/>' as attribute3
FROM  TABLE1
ORDER BY TITLE

必须以这种方式设置CARD_INITIALS和attributes3 - 其他组合无效。

然后，在列表区域属性中，将列表模板设置为Cards，样式设置为featured，图标设置为 - Display Initials。

2）经典报告 - 将其属性设置为卡片模板，并使用CARD_INITIALS，CARD_TITLE和CARD_TEXT作为源查询中的别名。两种方法都能产生预期的结果

Answer 2

这些列表的外观和结构是预先定义的。我认为这个列表模板将图像理解为css类。要工作，您需要提供有效的CSS类

图标/类列表：https://apex.oracle.com/pls/apex/f?p=42:icons

修改

也许您可以复制您尝试使用的此列表模板，并进行修改以获取图像的URL。为此，您需要转到共享组件＆gt;＆gt;模板＆gt;＆gt;找到您的模板列表＆gt;＆gt;点击要复制的报告的最后一列＆gt;＆gt;编辑html以接收图像的URL。在此页面上，您将找到几个替换字符串。

接收“图像”的那个是＃ICON_CSS_CLASSES＃，但它默认在“span”类中使用，它的变化是创建一个“img”并将该替换字符串放在“src”中“那个”img“，类似

<img src="#ICON_CSS_CLASSES#">

Oracle APEX - 显示动态列表中的卡片图像

2 个答案: