chrome 和 firefox 中的损坏图像在 safari 中工作答案

【问题标题】：broken image in chrome and firefox works in safarichrome 和 firefox 中的损坏图像在 safari 中工作
【发布时间】：2013-02-15 19:13:36
【问题描述】：

我有一个徽标在 Safari 中显示，但在 Chrome 中显示为断开的链接，在 Firefox 中根本不显示。

            <a href="index.html"><img src="images/logo-01.png"/></a>

我已经重新上传了很多次，甚至尝试了其他路径和文件名。

有人知道我是怎么搞砸的吗？

【问题讨论】：

你有没有试过让<image></image>标签不自动关闭，然后这样做？声明图像的高度和宽度也是一种很好的做法，以便浏览器可以保留适量的空间。
另一个想法，您是否有任何外部 CSS 应用于这些可能是原因的元素？我之所以问，是因为我的网站上有相同的标记，并且它在我的 PC 和 Mac 上的 Chrome、Safari、IE10 中都可以使用。

标签： image google-chrome firefox safari

【解决方案1】：

我遇到了同样的问题。对我来说，事实证明图像已损坏。如果我尝试在 photoshop 中打开 png 文件，我会收到一条错误消息，说它无法解析文件。

出于某种原因，safari 可以显示损坏的文件，但 chrome 不能。这就是我解决问题的方法。我注意到我的 macbook 上的“预览”可以很好地打开文件。如果您使用的是 Windows，可能会尝试使用 Paint 或 gimp 或除 Photoshop 之外的其他程序。

我将损坏的文件下载到我的 macbook 上，用预览打开它（用 > 预览打开）
在预览应用中，转到文件 > 复制，这会复制您的图像
保存复制的图像
作为测试，我尝试在 Photoshop 中打开新复制的图像，并且成功了！
将新文件上传到网站。我现在可以在 chrome 中查看图片了。

希望对遇到同样问题的人有所帮助。

【讨论】：

我不会撒谎，这听起来像是一个愚蠢的答案。尝试了它，因为没有其他方法起作用并且它修复了它。
Apple 有时会使用专有的 PNG 格式，例如在 iOS 应用程序中。这将导致这种行为。幸运的是，如果您需要以自动化方式处理此问题，有一个名为 pngdefry 的工具：http://www.jongware.com/pngdefry.html

【解决方案2】：

这可能是您的文件结构的问题。现在您的链接正在使用相对路径（例如href="index.html"）。如果您引用的文件与当前页面文件位于同一目录中，这很好。但是，如果您当前的页面位于其他地方，例如“页面”目录或其他地方，那么您需要告诉链接从站点根目录开始。这看起来像href="/index.html"（注意斜线）。因此，对于图像，您将拥有：

<a href="/index.html"><img src="/images/logo-01.png"/></a>

【讨论】：

除非你正在做../image/logo-01.png，否则你不需要那个领先的/。
假设页面与图片位于同一目录中，您可以将其关闭。我会更新答案以更具体
如果他提供更多代码和他的目录结构会有所帮助。我假设它是同一个目录，但考虑到它可以在 Safari 中使用。
是的，该网站适用于 safari 的每个页面，我应该提供什么才能更有帮助？对不起，我只做了几个月，还在学习。