View Full Version : Show image on a panel

14 Mar 2012, 1:40 AM
Hi All,

I have joined an ongoing project so may be this is a very dumb question but i am unable to show an image that rests in my PRJ directory.

here is my directory structure
i have my JS files in freemarker folder and want to show image kept inside 'images' folder.

I tried using

var myImage = Ext.create('Ext.Img', { src: '/PRJ/images/Testing.png',
renderTo: Ext.getBody()

i guess i am making some mistake with src path.
What should be the path?
i have tried almost everything.

14 Mar 2012, 1:55 AM
To add if i use any http url in src path i am able to show the image then why cant from the local?
I am using tomcat server in eclipse.

i use http://localhost:8080/PRJ/login (http://localhost.ms.com:8080/PRJ/login)

to show my login page

14 Mar 2012, 6:00 AM
Try this:

var myImage = Ext.create('Ext.Img', {
src: 'images/Testing.png',
renderTo: Ext.getBody()

Note that the renderTo won't work if you're using a Viewport or some other component is managing the body of the document.

To verify that your file pathing is correct, try this:

Ext.create('Ext.window.Window', {
height: 100,
width: 200,
items: [{
xtype: 'image',
src: 'images/Testing.png'

15 Mar 2012, 7:38 AM
Dont know whats wrong but still i am unable to show the image.
when i debug in firebug and hover over the src path the loader keeps moving but never shows the image.
That means some way or the other my src path is wrong and it is not getting to the image.

15 Mar 2012, 8:49 AM
Can you just remove your images folder under WEB-INF folder.
Here test case

Ext.create('Ext.window.Window', { height: 100, width: 200, items: [{ xtype: 'image', src: 'images/Testing.png' }] }).show();

Also i woul recomebd try to check your in your web browser direct path to image.
I meen http://localhost:8080/PRJ/images/Testing.png (http://localhost.ms.com:8080/PRJ/login)

19 Mar 2012, 12:32 AM
Same result no image comming to the page.
Browser also shows 404.
I tried every URL that could have fetched the image.

19 Mar 2012, 1:28 AM
did you move images folder under Web-inf?
It seams that you have problem on server side of your application but not with ExtJS.

19 Mar 2012, 1:30 AM
Hi harman,

What about this URL?

src: './images/Testing.png'
(Notice the dot (.) at first of it.)

Or maybe this:

src: './../images/Testing.png'

19 Mar 2012, 2:20 AM
Thanks but it didnt work either.
I think i need to go back to the basics again.

19 Mar 2012, 2:27 AM
What web server do you use? can you checl is there is your image? I mean on folder structure.

19 Mar 2012, 2:37 AM
Its a tomcat 5.5 server being used from inside of the eclipse.
I can not go to my .war's exploded directory structure since it is referenced not installed.

19 Mar 2012, 5:53 AM
Ok. You environment is the same as mine.
I can discover you a little secret. Extension war is the same that zip. It''s just an arhiv. You can open it with 7-zip or winRAR and see what there is inside. I am sure that there are no images folder. You need just to copy it war file in the root of war file. Or
as i mentioned earlier WEB-INF -> image that the right folder structure to make it work. Hope it works.

19 Mar 2012, 7:06 AM
I opened it and the images folder is there.
Now this is seriously making me mad.