jquery get image from images folder on the server RRS feed

  • Question

  • Hi I am new to jquery: I have googled some jquery ajax function to load and display image which is stored in images folder on the server;  first I tried url:"~/Images/"+name+".jpg"; I get error   "http://localhost:786/books/images/book.jpg" error 404 not found; the I hard coded url as shown below  where 'showcase' is the name of my web app and I get  404 error

    var name='book';
                   type: "GET",
                   url: "http://localhost:62795/showcase/Images/" + name + ".jpg",
                   dataType: "image/jpg",
                   success: function(img) {
                       i = new Image();
                       i.src = img;
                   error: function(error, txtStatus) {  alert(name);

    I am calling this function from onclick event; but I have hard coded the parameter name i want to provide to the function;

    can some one please help?

    is the error due to accessibility of image folder on the server? my app actually loads images from my  pictures folders and saves them in the images folder on the server and saves the image name in the database.

    my app displays information about books like author price and photo and i want to display image of the book on clicking the photo name 

    Saturday, February 20, 2016 5:24 AM

All replies

  • Maybe you will get lucky and one of the pros here can help you with this, but for working with the code you may be better off at the forums.  They love to dig into the code over there.

    ClarkNK AKA HomePage Doctor
    Database Tutorials Using ASP.NET Controls

    Saturday, February 20, 2016 12:45 PM
  • "~/" is for controls, not JavaScript. Try just "/Images/" if Images in a folder in the root of your site.

    Kathleen Wilber
    BrightWillow - ASP.NET applications

    Saturday, February 20, 2016 8:08 PM
  • I don't understand what you are trying to do.  If you want to display an image you need to create a link to the image.  You don't want to download the image.  The browser automatically transfers the image based on the link.  I usually use ajax and php to find the image file name and create a link in the HTML using jQuery.  Here is a sample JQuery

    function loadPics(callback) { var $this, len, i, cmd, el; cmd = "img/*.jpg|a"; ajaxReq(this, cmd, "pics", function ($this, data) { if (data.success) { len = data.v.length; for (i = 0; i < len; i++) { el = '<div><img src="img/' + data.v[i] + '" alt="image:' + i + '"></div>'; slider.slickAdd(el); } callback(); } }); };

        function  ajaxReq ($this, cmd, type, callback) {
            var errText;

            $("body").css("cursor", "progress")
                url: 'php/' + type + '.php',
                type: 'POST',
                context: $this,
                dataType: 'json',
                data: {
                    'cmd': cmd
            }).done(function (data) {
                $("body").css("cursor", "default")
                callback(this, data);
            }).fail(function (XHR, textStatus, errorThrown) {
                errText = getErrorText(XHR.responseText);
                $("body").css("cursor", "default")

    The PHP code is a little complicated because I automatically resize the images on the server to minimize bandwidth requirements.

    Sunday, February 21, 2016 12:25 AM