I have point feature with name PointPhoto. This feature have attribute:
- id
- area
- PhotoPath
Now I am using GeoExt popup to display this attributes, but I can't find a way to display image from image path, this is the code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all-debug.js"></script>
<script src="../OpenLayers-2.9.1/OpenLayers.js"></script>
<script type="text/javascript" src="geoext/script/GeoExt.js"></script>
<link rel="stylesheet" type="text/css" href="http://localhost:8181/geoserver/openlayers/theme/default/style.css"/>
<script type="text/javascript" src="../proj4js/lib/proj4js-compressed.js"></script>
<link rel="stylesheet" type="text/css" href="geoext/resources/css/popup.css">
<script type="text/javascript">
var app, items = [], controls = [];
var store;
Ext.onReady(function() {
app = new Ext.Viewport({
layout: "border",
items: items
});
});
items.push({
xtype: "gx_mappanel",
ref: "mapPanel",
region: "center",
map: {
numZoomLevels: 19,
controls: controls
},
extent: OpenLayers.Bounds.fromArray([
2189574.7042680467, 5418655.108865695,
2199298.319819289, 5426457.253025988
]),
layers: [new OpenLayers.Layer.WMS(
"cite:PointPhoto",
"http://192.168.1.2:8181/geoserver/cite/wms",
{layers: "cite:PointPhoto"},
{isBaseLayer: false}
)] ,
});
controls.push(
new OpenLayers.Control.PanZoomBar({position: new OpenLayers.Pixel(2, 15)}),
new OpenLayers.Control.Navigation()
);
controls.push(new OpenLayers.Control.WMSGetFeatureInfo({
autoActivate: true,
infoFormat: "application/vnd.ogc.gml",
maxFeatures: 3,
eventListeners: {
"getfeatureinfo": function(e) {
var items = [];
Ext.each(e.features, function(feature) {
items.push({
xtype: "propertygrid",
title: feature.fid,
source: feature.attributes
});
});
new GeoExt.Popup({
title: "Feature Info",
width: 200,
height: 200,
layout: "accordion",
map: app.mapPanel,
location: e.xy,
items: items[0]
}).show();
}
}
}));
</script>
</head>
<body>
</body>
</html>
My question is how I can display image inside of this popup?