在 UIBinder 的纯 HTML 元素中使用 ClientBundle 图像资源答案

【问题标题】：Using ClientBundle image resource in pure HTML element in UIBinder在 UIBinder 的纯 HTML 元素中使用 ClientBundle 图像资源
【发布时间】：2014-07-16 20:59:24
【问题描述】：

基于以下资源：

http://www.gwtproject.org/doc/latest/DevGuideClientBundle.html

Use ClientBundle image as background-image

我已经在一个 UIBinder 模板中成功实现了一个 GWT <g:Image> 图像资源：

<ui:with field='res' type='com._.client.resources.Resources'></ui:with>
<g:Image resource="{res.menuLogo}" altText="" styleName="{style.menuLogo}"/>

但是，我正在尝试将图像添加为 <g:MenuItem> 的子元素，在 GWT 中只能将纯 HTML 元素作为子元素：

<g:MenuItem>
    <img id="revealIcon" src="images/trianglebuttonWHITE-DOWN.png" width="11"/>
</g:MenuItem>

该图像是一个小部件，当子菜单处于活动状态时会发生变化。

我的目标是通过 ClientBundle 处理所有资源，并避免在 WAR 目录中有任何资源。

我可以为纯 HTML <img> 图像引用 ClientBundle 资源吗？

我应该以编程方式和/或使用 CSS Image Sprites 来代替吗？

【问题讨论】：

标签： gwt clientbundle

【解决方案1】：

<img id="revealIcon" src="{res.menuLogo.getSafeUri}" width="11"/>

请注意，为了安全起见，您应该使用DataResource 而不是ImageResource，因为从技术上讲，ImageResource 可以与其他图像捆绑在一起，并且只代表更大的“精灵”图像的一个区域（在这种情况下，ImageResource 将是ImageResourcePrototype.Bundle 的一个实例，但无法在 UiBinder 中进行检查）。

【讨论】：