加载图像时 jQuery 403 禁止

Question

我正在尝试将图像加载到我的模态插件中，但由于某种原因，它给了我一个 403 Forbidden 错误。我得到的实际错误是这样的:

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

图像位于根文件夹中，所以我知道它在那里，我只是不确定为什么它有问题。如果重要的话我会使用 XAMPP。这是我的模式代码:

(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);
    });
}

知道为什么我会收到此错误吗？

更新:

如果我尝试加载 options.url，会发生以下情况:

Answer 1

我可以发现此代码块的几个问题:

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

每次执行时都会创建一个单独的图像元素 $(img) 。 jQuery 对元素进行操作，而不是字符串。

第二，jQuery's load 函数使用 AJAX 加载 URL，并将其结果作为文本放入给定元素中(这解释了为什么您以文本形式获取图像数据)。你正在通过它img ，这只是字符串 <img> 。因为您想要做的是将图像插入到元素中，所以我认为您想要的是:

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