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:

        <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 
            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( 
                {layers: "cite:PointPhoto"}, 
                {isBaseLayer: false} 
            )] ,
        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) { 
                    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] 



enter image description here

My question is how I can display image inside of this popup?

2 Answers 2


Since the feature pop up is HTML code ... try wrapping the img path with :

<img src=..... />

This is how I did it on my ExtJS Grid.

enter image description here


Previous answer is parcially correct. You have to use a html tag. the easy way to do it, since the content of the featur info window is fetched by geoserver is using a getfeatureInfo template; in the content.ftl you should put someting like :

<#list features as feature>
  <li><b>Point of interest, "${feature.NAME.value}"</b>: <br/>
  <img src="http://host/folder${feature.PhotoPath.value}"/>

for more information have a look at:


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.