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，会发生以下情况： The Problem

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

Answer 2

这里的问题是你发送编码的html <img>。

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

http://localhost/Groundwork/<img>

哪个不正确，永远不会有像这样的图像名称。

因此，不要在<img>方法中指定.load()代码，请尝试options.url此处不需要使用.load()。

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

加载图片时jQuery 403 Forbidden

2 个答案: