Как встроить изображение SVG с помощью JSF/OmniFaces/PrimeFaces?

Вот что я пытаюсь сделать:

  1. У меня есть bean-компонент @ViewScoped JSF, в котором я вызываю службу JAX-RS, используя Джерси.
  2. Ресурс, который я запрашиваю, возвращает ответ с типом контента image/svg+xml.
  3. Отобразите его на странице Facelet.

Мои исследования до сих пор привели меня к мысли:

  • h:graphicImage (основной JSF) не поддерживает SVG
  • p:graphicImage (PrimeFaces) не поддерживает SVG
  • o:graphicImage (OmniFaces) также не поддерживает SVG.

Нет ли способа доставить SVG-изображение на страницу Facelets из резервного компонента? Служба, которая обслуживает SVG-изображения, будет позже расширена для поддержки доставки (помимо других форматов) PNG, но я надеялся, что использовать SVG напрямую.


person matsa    schedule 04.02.2015    source источник
comment
Пожалуйста, будьте конкретны. Покажите нам, что вы пробовали до сих пор, объясните, почему это не работает, вместо того, чтобы спрашивать, как я могу это сделать.   -  person Fund Monica's Lawsuit    schedule 04.02.2015


Ответы (2)


<o:graphicImage> устанавливает тип содержимого по умолчанию image, но ваш браузер, очевидно, не принял это для SVG-изображения. В соответствии с этой фиксацией я добавил для OmniFaces 2.1 поддержку SVG для <o:graphicImage dataURI="true">, и я добавили новый атрибут type, который позволяет явно указать тип изображения через расширение файла:

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

В случае, если он выдает IllegalArgumentException, как этот

java.lang.IllegalArgumentException: атрибут o:graphicImage 'type' должен представлять допустимое расширение файла. Обнаружено недопустимое значение «svg».

Тогда это означает, что ваш сервер не распознает его как зарегистрированное сопоставление mime. Затем вы должны добавить новое отображение mime в web.xml сервера или веб-приложения, как показано ниже:

<mime-mapping>
    <extension>svg</extension>
    <mime-type>image/svg+xml</mime-type>
</mime-mapping>
person BalusC    schedule 05.02.2015
comment
OmniFaces очень классный, жаль, что я не могу использовать его в портлетах. Я понимаю, что это техническое ограничение. - person Christian Wilkie; 05.02.2015
comment
BalusC, спасибо! Я думаю, что вы попали в точку здесь. Я протестирую снимок завтра и обновлю здесь позже. - person matsa; 05.02.2015
comment
Он работает отлично! Чтобы пояснить, вот мой тестовый пример: ‹o:graphicImage value=#{planBean.sign} dataURI=true height=100 width=100 type=svg/› Выражение EL возвращает InputStream. - person matsa; 06.02.2015
comment
Пожалуйста. В этой конструкции не должно быть необходимости только dataURI="true" (относительно дорогой). Если вы по-прежнему придерживаетесь dataURI="true", то type="svg" не нужно. - person BalusC; 06.02.2015
comment
Из вашего документа: если свойство InputStream или byte[] не отображается как URI данных, оно должно указывать на bean-компонент @ApplicationScoped без сохранения состояния (поддерживаются области JSF и CDI). Вот почему я включил его. - person matsa; 06.02.2015

Я не пробовал, но можете ли вы использовать ui:include JSF? Что-то вроде этого:

<ui:include src="assets/img/fileFromJersey.svg" />
person Christian Wilkie    schedule 04.02.2015
comment
Насколько я понимаю, у OP есть изображение только в аромате byte[] или InputStream. - person BalusC; 05.02.2015
comment
@BalusC Да, я думаю, это не сработало бы, если бы оно не было записано на диск. - person Christian Wilkie; 05.02.2015