How to add an image onto a new page

Question

I am learning HTML and javascript and cannot quite get something to work:

I have a new page being created and want to display an image on it:

thepage= window.open('', '', 'height=700,width=800,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes');

The page displays when it gains focus but I when I try to put an image on there I simply get, at the most, the red and white x box.

I have tried:

thepage.document.write(<img src=".\Images\theImage.jpg")

But this does not work even though the image code is identical to the main page where it does work and various other things.

Please note I do not want a popup which only shows an image, rather a fresh new page which contains the same image as the main page (at least to start with).

I have got to the point where I cannot see the wood for the trees here even though I know that this must be straightforward!!

When you write example code, make sure your sample code is not full of syntax errors. — epascarello, Jan 21 '13 at 14:23
Is this helpful:http://stackoverflow.com/questions/5451445/how-to-display-image-with-javascript — noobob, Jan 21 '13 at 14:23
Did you look at the net tab and see what the real path is. I bet it is a problem with relative paths. — epascarello, Jan 21 '13 at 14:24

score 0 · Answer 1 · answered Jan 21 '13 at 14:23

0

The red and white X box could mean that the image source you are specifying is incorrect. Did you try changing your relative URL to a fixed one?

Instead of .\Images\theImage.jpg it's always safer to provide the full image URL.

answered Jan 21 '13 at 14:23

Charles

4,372
9
41
80

Yeah, tried that. I copied and pasted the path from further down the page where it works fine and when that did not work I tried hardcoding the full path but it still did not work :-( – Stefan Jan 21 '13 at 14:28
Can you provide a link to the actual page where this is happening? – Charles Jan 21 '13 at 14:30
I don't think so - it is all stored on my local PC. – Stefan Jan 21 '13 at 14:37
I am new to web stuff (I am an old C++ programmer) - how much do I need to put on there, is it just the function or the entire program? If I just put the function on there then I get the same behaviour but it is not much more than I have put on here. – Stefan Jan 21 '13 at 14:46
Just put everything we need to see the problem replicated. – Charles Jan 21 '13 at 14:57
Could you please also include the code that you use to call theArena? I'm assuming you're clicking a button to make the new window pop up? – Charles Jan 21 '13 at 15:20

score 0 · Answer 2 · edited Jan 21 '13 at 19:40

0

Okay, you have a typo with your quotation marks being in the wrong place but try something like this:

var thepage = window.open('', '', 'height=700,width=800,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes');
thepage.document.body.appendChild("<img src=\".\Images\theImage.jpg\">");

Please check that the location of the image is correct as I would expect it to be like this ./Images/theImage.jpg

edited Jan 21 '13 at 19:40

Bart

19,692
7
68
77

answered Jan 21 '13 at 14:27

Mike Sav

14,805
31
98
143

I tried that and also with the full path to the image but it still appears as a blank page? – Stefan Jan 21 '13 at 14:34

score 0 · Answer 3 · answered Jan 21 '13 at 14:32

0

Maybe try something like this:

// open your new window
var theArena = window.open('', '', 'height=700,width=800,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes');

// create a base tag, and set the HREF to the same as your current page.
// This should allow you to use relative URLs for images and links
var base = theArena.document.createElement('base');
base.href = document.location.href
theArena.document.body.appendChild(base);

// Now use createElement to build the element
var img = theArena.document.createElement('img');
img.src = "./Images/theImage.jpg"; // make sure the URL is valid
theArena.document.body.appendChild(img);

answered Jan 21 '13 at 14:32

Gareth Cornish

4,357
1
19
22

Thanks but this just appears as an empty white square. Do I need to congfigure the new page somehow or perhaps I am using the wrong option for it somewhere? – Stefan Jan 21 '13 at 14:37
It sounds a lot like the path to your image is wrong. Perhaps just try `Images/theImage.jpg`, with forward slashes instead of back, and without the `.\`? – Gareth Cornish Jan 21 '13 at 14:47
Did not seem to change the behaviour :-( – Stefan Jan 21 '13 at 15:07
What is the exact URL of the parent page, as shown in the browser (and which browser are you using)? – Gareth Cornish Jan 21 '13 at 15:39
It just says blank page. The main window gives the file path to where the htm file is stored on my PC. I am using IE9 – Stefan Jan 21 '13 at 16:23

How to add an image onto a new page

3 Answers3