如何使用 JSF/OmniFaces/PrimeFaces 嵌入 SVG 图像？答案

【问题标题】：How can I embed an SVG image using JSF/OmniFaces/PrimeFaces?如何使用 JSF/OmniFaces/PrimeFaces 嵌入 SVG 图像？
【发布时间】：2015-02-04 15:59:34
【问题描述】：

这就是我想要做的：

我有一个 @ViewScoped JSF bean，我在其中使用 Jersey 调用 JAX-RS 服务。
我请求的资源返回内容类型为image/svg+xml 的响应。
在 Facelet 页面中显示它。

到目前为止，我的研究让我相信：

h:graphicImage（核心 JSF）不支持 SVG
p:graphicImage (PrimeFaces) 不支持 SVG
o:graphicImage (OmniFaces) 也不支持 SVG。

有没有办法将 SVG 图像从支持 bean 传递到 facelets 页面？ 提供 SVG 图像的服务将在稍后扩展以支持传递（以及其他格式）PNG，但我希望直接使用 SVG。

【问题讨论】：

请具体说明。向我们展示您到目前为止所做的尝试，解释为什么它没有做正确的事情，而不是问“我该怎么做”。

标签： jsf jsf-2.2 omnifaces

【解决方案1】：

<o:graphicImage> 将默认内容类型设置为image，但您的浏览器显然没有将其用于 SVG 图像。根据 this commit，我为 OmniFaces 2.1 添加了对 <o:graphicImage dataURI="true"> 的 SVG 支持，并且我添加了一个新的 type 属性，它允许您通过文件扩展名明确指定图像类型：

<o:graphicImage value="#{bean.image}" type="svg" />

如果它抛出一个像这样的IllegalArgumentException

java.lang.IllegalArgumentException: o:graphicImage 'type' 属性必须代表一个有效的文件扩展名。遇到无效的“svg”值。

那么这意味着您的服务器无法将其识别为已注册的 mime 映射。然后，您应该将新的 mime 映射添加到服务器或 webapp 的 web.xml，如下所示：

<mime-mapping>
    <extension>svg</extension>
    <mime-type>image/svg+xml</mime-type>
</mime-mapping>

【讨论】：

OmniFaces 非常酷，可惜我不能在 portlet 中使用它。我知道这是一个技术限制。
BalusC，谢谢！我想你在这里一针见血。明天我会测试快照，然后在这里更新。
完美运行！澄清一下，这是我的测试示例： EL 表达式返回一个 InputStream .
不客气。在这个结构中，只有dataURI="true" 不是必需的（相对昂贵）。如果您仍然坚持使用dataURI="true"，那么type="svg" 应该没有必要。
来自您的文档：“当不呈现为数据 URI 时，InputStream 或 byte[] 属性必须指向无状态的 @ApplicationScoped bean（支持 JSF 和 CDI 范围）。”这就是我启用它的原因。

【解决方案2】：

我没试过，但是可以用JSF的ui:include吗？像这样的：

<ui:include src="assets/img/fileFromJersey.svg" />

【讨论】：

据我了解，OP 的图像只有byte[] 或InputStream 的风格。
@BalusC 是的，我想如果不将其写入磁盘，这将无法正常工作。