отображать изображение из бобов со свойством "длина" видео

Question

Мне нужно отобразить изображение видеообъекта с длиной видео в нижней правой части изображения.

Я пробовал это:

<h:graphicImage url="#{video.picUrl}" height="30" width="30">
    <h:outputText value="#{video.Length}" />
</h:graphicImage>

Но длина текстапоказано вне изображения.Как я могу получить его внизу справа внутри изображения?

Answer 1

Это проблема чистого HTML / CSS. Сначала вам нужно выяснить, как должен выглядеть сгенерированный HTML / CSS для достижения ваших функциональных требований. Например, следующий HTML

<span class="imageWithText">
    <img src="some-video.png" width="30" height="30" />
    <span class="text">123</span>
</span>

со следующим CSS

.imageWithText {
    position: relative;
}
.imageWithText .text {
    position: absolute; 
    bottom: 3px;
    right: 3px; 
    background-color: white;
    font-size: .5em;
}

должно сработать для вас.

Видите ли, .text абсолютно позиционирован относительно .imageWithText, с bottom и right на 3px, так что он хорошо прилегает к правому нижнему углу.

Теперь, чтобы сгенерировать тот же HTML с JSF, код должен выглядеть так:

<h:panelGroup styleClass="imageWithText">
    <h:graphicImage value="#{video.picUrl}" height="30" width="30" />
    <h:outputText styleClass="text" value="#{video.length}" />
</h:panelGroup>

Этот же CSS можно использовать повторно.