Magnific popup: show “The image could not be loaded” when slide images

Question

I am using Magnific popup to slide my images in table, here is part of html code:

.....
<div id="portfolio" class="clearfix">
    <table class="table table-striped table-bordered table-hover table-condensed" id="dataTables-brickset">
        <thead>
            <tr><th>Image</th></tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <a href="http://www.brickshelf.com/gallery/mikezang/clonebrick/stardiamond/80029.jpg" title="Star Diamond／Military／CV-12 Reconnaissance Vehicle">
                        <img src="http://www.brickshelf.com/gallery/mikezang/clonebrick/stardiamond/80029.jpg" height="64" />
                    </a>
                </td>
            </tr>
            <tr>
                <td>
                    <a href="http://www.brickshelf.com/gallery/mikezang/clonebrick/stardiamond/80030.jpg" title="Star Diamond／Military／AH-1 Aemed Helicopter">
                        <img src="http://www.brickshelf.com/gallery/mikezang/clonebrick/stardiamond/80030.jpg" height="64" />
                    </a>
                </td>
            </tr>
.....

<script>
    $(function(){
        $('#portfolio').magnificPopup({
            delegate: 'a',
            type: 'image',
            image: {
              cursor: null,
              titleSrc: 'title'
            },
            gallery: {
              enabled: true,
              preload: [1, 1], // Will preload 0 - before current, and 1 after the current image
              navigateByImgClick: true
            }
        });
    });
</script>
....

The thumbnail images are good as below:

it is also ok when I click on image as such: when I want to slide images, I got screen like this: ! How can I solve this issue?