Getting a image through javascript

Question

I just want to bring image whenever i press css button but image is not coming. what can be wrong in this?

<html>
<head>
<script >
function create() {


var x = document.createElement("IMG");
x.setAttribute("src", "C:\Users\jai guru umesh\Desktop\webops\sha\fronthead images\rover0.png");
document.body.appendChild(x);




};

</script>
</head>
<body>
<input type="button" name="cssandcreate" id="cssandcreate" value="css"  onclick="create()"/>

</body>
</html>

It works OK for me jsfiddle.net/Br5xd/6 You should check the image url — King King
– King King, Commented Apr 19, 2014 at 14:01
It is saying file not found. why that is happening? any idea. — user2828274
– user2828274, Commented Apr 19, 2014 at 14:04
you don't have any image matching the name rover0.png in the specified path, I'm also not sure if the path is interpretable, normally we should use file:///C:/... not C:\... but I'm not really sure about that. — King King
– King King, Commented Apr 19, 2014 at 14:06
This will not work since the browser will not let you access files on your HD. You could load the image and hide and then on the onclick event just show it. And KingKong is correct, you need to use the file:/// protocol. — stackErr
– stackErr, Commented Apr 19, 2014 at 14:08
specified path is correct and in other cases it is working , but not in this. — user2828274
– user2828274, Commented Apr 19, 2014 at 14:12

Marko Gresak · Accepted Answer · 2014-04-19 14:09:28Z

1

Your error is in setAttribute function, you can't use this kind of path in web browsers as it works on client's pc and this would mean you could access their storage, which would be huge privacy concern.

You should use images locally from your file, either in same file as this html file, or in a subfolder, e.g. .../img (where ... is folder which contains html file). Then you can use relative path:

x.setAttribute("src", "img/rover0.png"); // this should work on any system

You can use / for windows paths too, but if you want to use \, make sure to use \\.

But if you insist on absolute file path, use this:

x.setAttribute("src", "file:///C:\\Users\\jai guru umesh\\Desktop\\webops\\sha\\fronthead images\\rover0.png");

Note the use of file:/// and \\ (using / instead \\ should work as well)

answered Apr 19, 2014 at 14:09

Marko Gresak

8,2676 gold badges43 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user2828274 Over a year ago

Now how can I fix the position of the image?

stackErr Over a year ago

@user2828274 how do you want to position the image?

user2828274 Over a year ago

i am using onmousedown to get the coordinates of my cursor and i am getting it correctly, now i want to create a image at the points wherever i will click in the screen. i was trying x.style.position=absolute; x.id='1'; x.style.left='c'; x.style.top='d';

stackErr · Accepted Answer · 2014-04-19 14:14:24Z

0

You could load the image with the page and hide it until a user clicks on it.

<html>
<head>
<script >
function showImage(image) {



image.style.display = "inline";




};

</script>
</head>
<body>
<input type="button" name="cssandcreate" id="cssandcreate" value="css"  onclick="create()"/>
<img src="../fronthead images/rover0.png" style="display:none;" onclick="showImage(this)" />

</body>
</html>

Also I changed your path to a relative path since browsers will not allow access to your HD.

answered Apr 19, 2014 at 14:14

stackErr

4,1704 gold badges27 silver badges50 bronze badges

Comments

FabioSorre · Accepted Answer · 2014-04-19 14:16:31Z

0

Use relative path (absolute if you have a link):

x.setAttribute("src", "../image.png");

In surplus, I suggest you to pay attention to the directory names (e.g fronthead images) it's better not use special characters and blank spaces (so "fronthead images", it's better in thi form "frontheadImages", or "fronthead_images")

answered Apr 19, 2014 at 14:16

FabioSorre

3103 silver badges11 bronze badges

2 Comments

user2828274 Over a year ago

How can i change position of the image?

FabioSorre Over a year ago

You can use css (depends case by case) remember the difference between position types (relative, absolute and fixed). If you want to change the position with javascript i suggest to use jquery (.css method) that's the same to modify the css but by javascript

Collectives™ on Stack Overflow

Getting a image through javascript

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related