数据表中使用原子的动态图像，数据中未显示的图像 [英] dynamic images in datatable using primefaces, images not showing in datatable
本文介绍了数据表中使用原子的动态图像，数据中未显示的图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用的是原始的3.5版本来显示数据库中的数据库中的图像，但不幸的是，不用实际的图像image被写入列，这里是我的xhtml文件
I am using primfaces 3.5 version to show images from my database in datatable, but unfortunately instead of actual images "image" is getting written in column, here is my xhtml file
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<body>
<ui:composition template="./template.xhtml">
<ui:define name="top">
</ui:define>
<ui:define name="left">
left
</ui:define>
<ui:define name="content">
<h:form id="form1">
<p:panel id="panel" header="New Category">
<p:messages id="msgs1"/>
<h:panelGrid columns="3">
<h:outputLabel for="categoryName" value="Category Name: *" />
<p:inputText id="categoryname" value="#{categoryBean.categoryName}" required="true" label="Categoryname">
<f:validateLength minimum="2" />
</p:inputText>
<p:message for="categoryname" display="icon"/>
<h:outputLabel value="Upload Image" />
<p:fileUpload fileUploadListener="#{categoryBean.upload}"
allowTypes="/(\.|\/)(gif|jpe?g|png)$/" sizeLimit="100000" description="Select Images"/>
</h:panelGrid>
<p:commandButton id="btn" value="Save" update=":form:count" />
</p:panel>
</h:form>
<h:form id="form">
<p:spacer height="20px"></p:spacer>
<p:dataTable id="count" var="category"
value="#{categoryBean.categories}" paginator="true" rows="7">
<f:facet name="header">
Available Categories
</f:facet>
<p:column headerText="Category ID" style="width:4%">
<h:outputText value="#{category.idCat}" />
</p:column>
<p:column headerText="Category Name" style="width:24%">
<h:outputText value="#{category.categoryName}" />
</p:column>
<p:column headerText="Category Image" style="width:24%">
<p:graphicImage alt="image" value="#{category.categoryimg}" cache="false" >
</p:graphicImage>
</p:column>
<p:column style="width:4%">
<p:commandButton value="Delete" action="#{categoryBean.deleteAction(category)}" update=":form:count"/>
</p:column>
</p:dataTable>
</h:form>
</ui:define>
<ui:define name="bottom">
</ui:define>
</ui:composition>
</body>
</html>
这是我的托管bean：
here is my managed bean :
package com.app.beans;
/**
*
* @author
*/
@ManagedBean
@RequestScoped
public class CategoryBean implements Serializable{
public long idCat;
public String categoryName;
public List<Category> categories;
public ItemController itemController;
byte[] data;
private StreamedContent dbImage;
public StreamedContent getDbImage() {
return dbImage;
}
public void setDbImage(StreamedContent dbImage) {
this.dbImage = dbImage;
}
public StreamedContent getImage(Category cat)throws IOException{
FacesContext context = FacesContext.getCurrentInstance();
System.out.println("int get images category id is: "+cat.getCategoryName());
if (context.getCurrentPhaseId() == PhaseId.RENDER_RESPONSE) {
// So, we're rendering the view. Return a stub StreamedContent so that it will generate right URL.
System.out.println("So, we're rendering the view. Return a stub StreamedContent so that it will generate right URL.");
return new DefaultStreamedContent();
}else{
System.out.println("in actual image content");
dbImage= new DefaultStreamedContent(new ByteArrayInputStream(itemController.getImageByName(cat.getCategoryName())), "image/png");
return dbImage;
}
}
public String getCategoryName() {
return categoryName;
}
public void setCategoryName(String categoryName) {
this.categoryName = categoryName;
Category c = new Category();
c.setCategoryName(categoryName);
int status = itemController.setCategory(c);
if(status == 1){
categories.add(c);
}
}
@PostConstruct
public void init(){
categories = new ArrayList<Category>();
itemController = new ItemController();
categories = itemController.getAllCategories();
}
public long getIdCat() {
return idCat;
}
public void setIdCat(long idCat) {
this.idCat = idCat;
}
public List<Category> getCategories() {
return categories;
}
public void setCategories(List<Category> categories) {
this.categories = categories;
}
/**
* Creates a new instance of CategoryBean
*/
public CategoryBean() {
}
public String deleteAction(Category c) {
System.out.println("from deleteAction"+c.getCategoryName());
int status = itemController.deleteCategory(c.getCategoryName());
if(status == 1){
categories.remove(c);
}
return null;
}
public void upload(FileUploadEvent event) {
FacesMessage msg = new FacesMessage("Success! ", event.getFile().getFileName() + " is uploaded.");
FacesContext.getCurrentInstance().addMessage(null, msg);
// Do what you want with the file
System.out.println("From Upload" + event.getFile().getFileName());
int nRead;
data = new byte[16384];
InputStream is = null;
ByteArrayOutputStream buffer = new ByteArrayOutputStream();
try {
is = event.getFile().getInputstream();
while ((nRead = is.read(data, 0, data.length)) != -1) {
buffer.write(data, 0, nRead);
}
buffer.flush();
} catch (IOException ex) {
Logger.getLogger(UpdateItem.class.getName()).log(Level.SEVERE, null, ex);
}
}
}
我正在获取与类别名称相对应的图像，即日志中，我正在努力了解为什么我的getImage功能的一部分不会被调用
，这是日志获取生成：
I am getting images corresponding to category name, that is comming in log, I am trying to understand why else part of my getImage function in not getting called
and this is the log getting generated :
WARNING: JSF1091: No mime type could be found for file dynamiccontent. To resolve this, add a mime-type mapping to the applications web.xml.
Jun 07, 2013 11:14:41 PM com.sun.faces.context.ExternalContextImpl getMimeType
WARNING: JSF1091: No mime type could be found for file dynamiccontent. To resolve this, add a mime-type mapping to the applications web.xml.
int get images category id is: xyz
So, we're rendering the view. Return a stub StreamedContent so that it will generate right URL.
int get images category id is: x1
So, we're rendering the view. Return a stub StreamedContent so that it will generate right URL.
int get images category id is: x2
So, we're rendering the view. Return a stub StreamedContent so that it will generate right URL.
int get images category id is: Main Course
So, we're rendering the view. Return a stub StreamedContent so that it will generate right URL.
int get images category id is: Drinks
So, we're rendering the view. Return a stub StreamedContent so that it will generate right URL.
Jun 07, 2013 11:14:41 PM org.primefaces.application.PrimeResourceHandler handleResourceRequest
SEVERE: Error in streaming dynamic resource. java.lang.NullPointerException
Jun 07, 2013 11:14:41 PM org.primefaces.application.PrimeResourceHandler handleResourceRequest
SEVERE: Error in streaming dynamic resource. java.lang.NullPointerException
Jun 07, 2013 11:14:41 PM org.primefaces.application.PrimeResourceHandler handleResourceRequest
SEVERE: Error in streaming dynamic resource. java.lang.NullPointerException
Jun 07, 2013 11:14:41 PM org.primefaces.application.PrimeResourceHandler handleResourceRequest
SEVERE: Error in streaming dynamic resource. java.lang.NullPointerException
Jun 07, 2013 11:14:41 PM org.primefaces.application.PrimeResourceHandler handleResourceRequest
SEVERE: Error in streaming dynamic resource. java.lang.NullPointerException
Jun 07, 2013 11:14:42 PM org.primefaces.application.PrimeResourceHandler handleResourceRequest
SEVERE: Error in streaming dynamic resource. Expression cannot be null
Jun 07, 2013 11:14:42 PM org.primefaces.application.PrimeResourceHandler handleResourceRequest
SEVERE: Error in streaming dynamic resource. Expression cannot be null
如果else子句被注释，则会抛出以下错误：
When commented if else clause, it throws following error:
SEVERE: Error Rendering View[/categoryUpdate.xhtml]
java.lang.NullPointerException
at org.primefaces.component.graphicimage.GraphicImageRenderer.getImageSrc(GraphicImageRenderer.java:110)
at org.primefaces.component.graphicimage.GraphicImageRenderer.encodeEnd(GraphicImageRenderer.java:46)
at javax.faces.component.UIComponentBase.encodeEnd(UIComponentBase.java:875)
at javax.faces.component.UIComponent.encodeAll(UIComponent.java:1763)
at javax.faces.component.UIComponent.encodeAll(UIComponent.java:1759)
at org.primefaces.component.datatable.DataTableRenderer.encodeRegularCell(DataTableRenderer.java:741)
at org.primefaces.component.datatable.DataTableRenderer.encodeRow(DataTableRenderer.java:693)
推荐答案
有2到目前为止，您的做法有错误：
There are 2 mistakes in your approach so far:
-
您必须使用
< f：param>里面的< p：graphicImage>传递图像ID。您不能在< p：graphicImage value>中使用EL 2.2方法参数传递。图像由完全独立的HTTP请求请求。只有当需要为< img src>生成URL时，才会使用EL 2.2方法参数传递生成HTML输出。然而，URL也必须唯一地标识图像，只能使用< f：param>。
You must use
<f:param>inside<p:graphicImage>to pass image ID. You cannot use EL 2.2 method argument passing in<p:graphicImage value>. The image is requested by a completely separate HTTP request. The EL 2.2 method argument passing is only used during generating HTML output, when the URL needs to be generated for<img src>. However that URL in turn must also uniquely identify the image and that can only be done with<f:param>.
不是技术问题，而是更多的设计问题：您应该将图像流传输到一个完全独立的应用程序作用域bean中，而不是与常规托管bean代码混合。这样，图像流可重复使用，您可以清楚地分离使代码更容易理解和维护的问题。
Not a technical problem, but more a design problem: you should put the image streamer in an entirely separate application scoped bean and not mingle it with "regular" managed bean code. This way the image streamer is reusable and you can clearly separate the concerns which makes the code better understandable and maintainable.
另请参见：
- 从JSF DataTable中的MySQL数据库中显示图像
- 使用p：graphicImage 从数据库显示图像
- Displaying image from MySQL Database in JSF DataTable
- Display image from database with p:graphicImage
See also:
这篇关于数据表中使用原子的动态图像，数据中未显示的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
