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

Question

这是我正在尝试做的事情：

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

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

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

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

Answer 1

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

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

Answer 2

<o:graphicImage> sets a default content type of image, but your browser apparently didn't swallow that for SVG images. As per 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' attribute must represent a valid file extension. Encountered an invalid value of 'svg'.

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

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

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

How can I embed an SVG image using JSF/OmniFaces/PrimeFaces?

jsf

jsf-2.2

omnifaces