在我的静态页面上线后，图像消失或显示质量差答案

【问题标题】：After going live with my static page the images disappear or display in a poor quality在我的静态页面上线后，图像消失或显示质量差
【发布时间】：2019-05-31 10:05:11
【问题描述】：

我一直在制作我的婚礼页面作为初始项目。这是一个包含大量图像的简单视差站点。只使用了 Html、CSS 和一点 Javascript（导入）。

在我的本地服务器上，一切似乎都运行良好。不幸的是，在上传并打开网站后，它变得一团糟。所有图像要么以灾难性的质量显示，要么干脆消失。我尝试了多个浏览器，重新上传了文件，检查了文件路径，但无法找出问题所在。 Chrome 开发控制台显示有关图像的错误：

加载资源失败：服务器响应状态为 404（未找到）

网站主机：iPage
FTP：filezilla

图片都是JPEG格式。

这是登陆页面的链接：http://zsizsiszabi.com/

【问题讨论】：

仔细检查你的路径，这可能就是你得到 404 的原因。这些图像应该像这样扭曲吗？这些酒吧是不是有点艺术？
您能否从管理员控制台下载图像或查看文件大小？然后您可以验证图像是否已更改，这似乎很可能。
网站速度太慢，无法使用。在我的连接上，该站点在 1.39 分钟内下载了 49M（！）。虽然图像不能被描述为质量差（例如，失焦、模糊、有损过多的伪影）——它们只是被损坏了。请参阅this image 上的块状块 - 它需要重新上传。也许您的 FTP 客户端需要设置为二进制模式？
（目前的问题是题外话，因为它完全依赖于外部链接。请上传示例图片以防止它被搁置）。
Zoltan，您的图片对于网络来说太大了。您需要压缩所有图像以针对网络进行优化。如果整个网站是 160mb，我想大部分数据都来自你所有的图像。正如halfer 所提到的，连接速度很慢，这对您的最终用户来说将是非常痛苦的。如果有人在移动设备上使用移动网络访问该站点，该移动网络可能会使用其大部分数据（取决于数据计划）如果您有 Photoshop，则可以压缩网络图像。还有其他免费程序也可以做到这一点（例如：pnggauntlet.com）

标签： javascript html css web-hosting

【解决方案1】：

关于丢失的图片，例如：

GET http://zsizsiszabi.com/Images/Denmark/treasure-map.png 404 (不是找到）

这表示在此路径中找不到图像 treasure-map.png，并查看用于显示此图像的 img 标记：

<img src="../Images/Denmark/treasure-map.png" id="treasure" alt="">

您告诉浏览器，“我希望通过向上一个文件夹然后转到文件夹/Images/Denmark 来找到这张图片”，是吗？

关于损坏的图片，他们上传不正确，上传时发生了损坏图片的事情，或者您在 FTP 应用程序中使用了错误的设置，请查看此图片：
http://zsizsiszabi.com/English/ism/image/slides/_u/1544619616573_87463.jpeg
这不是因为网站，而是因为上传过程。

【讨论】：

我已经仔细检查了桌面上的文件路径，一切正常（使用 Atom 实时服务器）。如果路径不好，我会得到相同的结果。上传的目录以相同的顺序包含文件。 FTP 是 filezilla...无法解决问题

【解决方案2】：

我发现您的 CSS 中引用的图像存在问题。例如查看您的 parallax1 css 选择器/规则。这个 css 代码 sn-p 是我在开发工具中看到的。

你在使用带有任何 css 插件的 webpack/babel 吗？在捆绑/导出过程中可能出现了问题。

我会回去看看你的 CSS。确保您的图像未加载的所有实例的路径都是正确的。如果一切正常，则可能是捆绑过程出现问题...

.parallax1 {
    background-image: url(../Images/Abo{ background-image: url(../Images/About/intro.jpg);
    min-height: 100%;
}

【讨论】：

有意思，你发送的snipet (parallax1) 和原来的不一样。上传目录时似乎发生了变化。
我正在使用 JS 图像 slder 插件和天气小部件，但它们在我的本地服务器上运行良好。它必须是 FTP...
你在使用 webpack/babel 吗？