jQuery 403 Forbidden when loading image

Question

I'm trying to load an image into my modal plugin, but for some reason it's giving me a 403 Forbidden error. The actual error I get is this:

"NetworkError: 403 Forbidden - http://localhost/Groundwork/%3Cimg%3E"

The image is in the root folder so I know it's there, I'm just not sure why it's having issues. If it matters I'm using XAMPP. Here's my modal code:

(function($)
{
    $.fn.modal = function(userOptions)
    {
        var defaultOptions = 
        {
            size        :   null, 
            url         :   null,
            image       :   null 
        }

        options = $.extend({}, defaultOptions, userOptions);

        $(this).addClass('modal-show');
        var id = $(this).data('modal-id');
        buildModal($(this), id);
    };

    function buildModal(element, id)
    {
        //  Create the modal window container
        var modalWindow = document.createElement('div');
        $(modalWindow).attr('id', id).addClass('modal');

        //  Create the modal body where we will load the external html/image
        var modalBody = document.createElement('div');
        $(modalBody).addClass('modal-body');

        //  If the user provides an external link/image then load that image into the modal body
        if (options.url && options.image == false)
        {
            $(modalBody).load(options.url);
        }

        else if (options.url && options.image == true)
        {
            var img = "<img>";
            $(img).attr('src', options.url);
            $(img).attr('alt', options.url);
            $(modalBody).load(img);
        }

        else
        {
            //  If the user doesn't not provide an external link or image then take the element
            //  calling this plugin and load it's contents into the modal
            $(modalBody).append(element.contents());
        }

        //  Create and add the close button
        var closeBtn = document.createElement('button');
        $(closeBtn).addClass('close');
        $(closeBtn).html('&times;');

        // Finally let's add the content to the modal itself
        $(modalWindow).append(modalBody);
        $('body').append(modalWindow);

        // Finally let's add the content to the modal itself
        $(modalWindow).append(modalBody);
        $(modalWindow).append(closeBtn);
        $('body').append(modalWindow);
    }

    function closeModal(id)
    {
        var modalID = '#' + id;

        //  Get the DOM that contains the modal so we can remove the backdrop
        var content = $('.modal-backdrop').contents();

        //  Have the backdrop and the modal fade out
        $(content).fadeOut();

        // Remove the backdrop from around the modal
        $('.modal-backdrop').replaceWith(content);  
    }

    function showModal(id)
    {
        var modalID = '#' + id;

        /*
        *   Add the backdrop around the modal (This is done primarily
        *   to make the developer's life easier so that they don't
        *   have to create the div for the backdrop.
        */
        $(modalID).wrapAll('<div class="modal-backdrop">');

        // Have the backdrop and the modal fade in
        $('.modal-backdrop').fadeIn().find(modalID).fadeIn();
    }

    $('body').on('click', '.modal-show', function(event)
    {
        event.preventDefault();

        //  Get the ID of the modal that we want to show
        var id = $(this).data('modal-id');
        showModal(id);
    });

    $('body').on('click', '.close', function(event)
    {
        event.preventDefault();

        //  Get the ID of the modal that we want to show
        var id = $(this).data('modal-id');

        closeModal(id);
    });
}

Any ideas why I'm getting this error?

Update:

If I try to load options.url this is what happens:

Answer 1

I can spot a couple of issues with this code block:

var img = "<img>";
$(img).attr('src', options.url);
$(img).attr('alt', options.url);
$(modalBody).load(img);

is creating a separate image element each time you do $(img). jQuery operates on elements, not strings.

Second, jQuery's load function loads a URL with AJAX, and places its result as text into the given element (which explains why you're getting the image data as text). You're passing it img, which is just the string <img>. Since what it looks like you're trying to do is insert the image into the element, what I think you want is:

var img = $("<img>");
img.attr('src', options.url);
img.attr('alt', options.url);
$(modalBody).append(img);

Answer 2

The problem here is that you are sending encoded html <img>.

So your url looks like this:

http://localhost/Groundwork/<img>

Which is incorrect, there never be an image name like this.

So instead of specifying <img> tag inside .load() method, try options.url don't need to use .load() here.

var img = $('<img>').attr({
    src: options.url, 
    alt: options.url
});
$(modalBody).append(img);