如何使用JSF/OmniFaces/PrimeFaces嵌入SVG图像? [英] How can I embed an SVG image using JSF/OmniFaces/PrimeFaces?

问题描述

这就是我想要做的:

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

1. I have a @ViewScoped JSF bean in which I call a JAX-RS service using Jersey.
2. The resource I'm requesting returns a response with content-type image/svg+xml.
3. Display it in a Facelet page.

到目前为止，我的研究使我相信:

My research so far has lead me to believe:

• h:graphicImage(Core JSF)不支持SVG
• p:graphicImage(PrimeFaces)不支持SVG
• o:graphicImage(OmniFaces)也不支持SVG.

• h:graphicImage (Core JSF) does not support SVG
• p:graphicImage (PrimeFaces) does not support SVG
• o:graphicImage (OmniFaces) does not support SVG either.

是否无法将SVG图像从支持bean传递到facelets页面上?稍后将扩展提供SVG图像的服务，以支持(在其他格式中)传递PNG，但是我希望直接利用SVG.

Is there no way to deliver an SVG image to a facelets page from a backing bean? The service that serves the SVG images will be extended later to support delivering (among other formats) PNG but I was hoping to utilize the SVG directly.

推荐答案

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

The <o:graphicImage> sets a default content type of image, but your browser apparently didn't swallow that for SVG images. As per this commit, I've for OmniFaces 2.1 added SVG support for <o:graphicImage dataURI="true"> and I've added a new type attribute which allows you to explicitly specify the image type via file extension:

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

以防它抛出这样的IllegalArgumentException

java.lang.IllegalArgumentException:o:graphicImage'type'属性必须表示有效的文件扩展名.遇到无效的'svg'值.

java.lang.IllegalArgumentException: o:graphicImage 'type' attribute must represent a valid file extension. Encountered an invalid value of 'svg'.

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

Then it means that your server doesn't recognize it as a registered mime mapping. You should then add a new mime mapping to server's or webapp's web.xml as below:

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

这篇关于如何使用JSF/OmniFaces/PrimeFaces嵌入SVG图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！