加载图像时禁止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

这里的问题是您正在发送编码的 html <img>。

所以你的网址看起来像这样：

http://localhost/Groundwork/<img>

这是不正确的，从来没有这样的图像名称。

所以不要在.load()方法中指定<img>标签，试试options.url不需要在这里使用.load()。

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

Answer 2

我可以发现这个代码块的几个问题：

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