使用渲染条件时，GraphicImage alt 不可见答案

【问题标题】：GraphicImage alt not visible while using rendered condition使用渲染条件时，GraphicImage alt 不可见
【发布时间】：2014-09-04 12:48:05
【问题描述】：

我的 xhtml 中有一个图形图像，我在某些情况下正在加载：

这是组件：

<h:graphicImage id="imgHlpProfileClass" 
                        styleClass="helpIcon" 
                        url="/images/icons/dashboard_help_16.png" 
                        alt="Help Text"/>

在这种情况下，将显示 alt 中的文本。

但是当我在组件中应用渲染条件时，不会显示 alt 属性。

例子：

<h:graphicImage id="imgHlpProfileClass" 
                        styleClass="helpIcon" 
                        url="/images/icons/dashboard_help_16.png" 
                        alt="Help Text"
                        rendered="#{not empty targetSource.object.type}"/>

编辑：

我做了这样的改变。渲染属性对输出文本和 GraphicalImage 都正确工作。但在图形图像的情况下，alt 不起作用。这里有什么问题？

<h:panelGroup id = "overrideProvisioningActionTextPanel">
          <h:outputText value="Override Default Provisioning" 
                        rendered="#{not empty targetSource.object.type}"/>
          <h:graphicImage id="imgHlpAppCase" 
                        styleClass="helpIcon" 
                        url="/images/icons/dashboard_help_16.png" 
                        alt="Help Text"
                        rendered="#{not empty targetSource.object.type}"/>
      </h:panelGroup>

【问题讨论】：

“rendered”属性中的表达式将被评估为真或假，无论它是否有效。您必须检查您的表达式是否正确或有意义（例如，尝试将另一个组件添加到打印其值的同一页面）
是的，同样的表达式也适用于其他组件并且效果很好。
是您尝试更新此组件时出现的问题吗？如果页面加载时没有渲染，那么组件不存在并且“更新”子句将被忽略，您必须将图像包装在另一个“可重新渲染”组件中
alt 什么时候没有显示？当rendered 是false 时，你的意思是？
我已对问题进行了更改。如果我删除渲染条件，则会显示替代文本。为什么会这样？

标签： jsf jsf-2

【解决方案1】：

您将alt 与title 混淆了。

alt 仅在图像损坏或最终用户使用不加载图像的客户端（如屏幕阅读器）时显示为替换文本。此外，搜索机器人还使用alt 作为关键字来匹配图像。 alt 不意图用作工具提示。因此应该使用title 属性（就像在其他所有组件/元素上一样）。 alt 和 title 的外观也不同。 alt 显示为内嵌文本，而 title 仅在悬停时显示。

所以，这就是你最终需要的：

<h:graphicImage ... title="Help Text" />

这一切都与rendered 属性的存在无关。删除它时您会遇到完全相同的问题（同时拥有工作图像！）。

另见：

Basic HTML tutorial - the <img> element

【讨论】：

+1... 我已经使用了标题，现在它可以正常工作了。但我很好奇为什么在相同条件下使用 alt 不起作用。理想情况下，它应该在这两种情况下都有效。这背后有什么原因吗？
rendered 条件没有影响。更有可能是您没有运行您认为正在运行的代码，或者由于图像实际上已损坏而存在错误观察。将来，最好创建一个 MCVE 来排除自己的错误观察。
如果我删除渲染条件，它工作正常。我认为我缺少一些东西。我必须检查一下，我会尽快回复您。