Dynamically loading image into div from client side - jQuery

I tried loading an web image, it works. But I want to load a client-side image.

$("#lol").live("click", function() {
 $(".main").html('<img src="file:///D:/lol.jpg" />')开发者_如何学Go;
})

Your src attribute needs to be accessible through the web through http(s). Remember, clients don't have access to your files, only what a web server can serve up to them.

That's a browser security issue. If you were allowed to load local files at will you could exploit that in order to access remote files on the user machine.

Why do you need to do that? Maybe there is another way to accomplish what you want.

Specify the hosted url from where you are running the application. Something like http://localhost

Note: This will only work locally but not over the inernet. You should always use the application relative path for images.

$("#lol").live("click", function() {
    $(".main").html('<img src="http://localhost/applicationName/images/lol.jpg" />');
});