为什么这张图片在网上加载时损坏了，但当我预览时却没问题？

Question

我正在为我的嫂子网站制作画廊页面，当我通过在 Chrome、Firefox 和 Explorer 中打开“.html”文件来查看网站时，图片加载完美，但当我发布网站时，它不再有效。我复制了临时灯箱的代码，但找不到复制它的页面。

这是 html 代码：

<!--Lightboxes-->
    <div id="outdoors1" class="outdoor1_content">
        <img src="images/gallery/outdoor/1.jpg" width="600" height="450"/>
        <a href="outdoor.html" onclick ="document.getElementById('outdoors1').style.display='none';document.getElementById('fade').style.display='none'" style="color:#333333"><div id="closetext"><img src="images/gallery/closebutton.png" width="40" height="40"/></a></div></a>
    </div>
<div id="fade" class="black_overlay"></div>
    <div class="outdoor_container">
        <div class="outdoor_container2">
            <div id="outdoor1">
                <img src="images/gallery/outdoor/outdoor1.jpg" width="170" height="170" onmouseover="" style="cursor: pointer;" onclick="document.getElementById('outdoors1').style.display='block';document.getElementById('fade').style.display='block';"/>
            </div>

我只包含了其中一张图片的代码，因为它在每个画廊页面上重复了多次。

这是CSS：

    /*Lightbox content placement*/
    .black_overlay{
        display:none;
        position:absolute;
        top:0%;
        left:0%;
        width:100%;
        height:1530px;
        background-color:black;
        z-index:1001;
        -moz-opacity:0.8;
        opacity:.80;
        filter:alpha(opacity=80);
    }
    #closetext{
        position:relative;
        float:left; 
    }

#outdoor1{
    position: relative;
    float: left;
    left: 190px;
    top: 50px;
    z-index: 1;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
}

Answer 1

您的网站加载正常。你的图片太大了（为 300x300px space 加载 900Kb 的图片效率非常低）但是在某些页面上图片没有加载 - 错误 404，所以你需要检查你的 links 是 CasE敏感

您所拥有的是一些定义为 images/gallery/outdoor3.jpg 的缩略图图像，它们有效且存在，并且 1500x1500 尺寸足够大，但您的灯箱全尺寸图像正在寻找 images/gallery/outdoor/3.jpg 而不是'存在。您需要仔细检查您的 link 地址！！

来自您的代码：

<!-- Lightbox -->
        <img src="images/gallery/outdoor/1.jpg" width="600" height="450"/>

 ...

<!-- thumbnail -->
    <img src="images/gallery/outdoor/outdoor1.jpg" width="170" height="170" />

您的地址不同，它们可能应该与上面的缩略图相同，该缩略图使用 1500x1500 的图像并以 170x170 的尺寸显示，当图像足够大可以作为灯箱目标时。

此外，我强烈建议取消所有混乱的内联 javascript 和 using Lightbox 2。

为什么这张图片在网上加载时损坏了，但当我预览时却没问题？

Why is this image broken when loaded online but when I preview it is fine?

html

css

lightbox