Windows 8 磁贴未显示正确的图像。改为显示收藏图标

Posted 2023-02-25

【中文标题】Windows 8 磁贴未显示正确的图像。改为显示收藏图标

【英文标题】：Windows 8 tile not displaying correct images. fav icon displayed instead

【发布时间】：2013-12-06 16:05:06

【问题描述】：

我们将网页固定在 Windows 8 机器上，但它显示的图像似乎是收藏图标，而不是元数据/xml 文件中指定的图标。

我首先尝试在所有网页中将其添加到我的 head 部分：

<!--[if IE]>
<meta name="application-name" content="My App"/>
<meta name="msapplication-TileColor" content="#ffffff"/>
<meta name="msapplication-TileImage" content="http://mysite.somwhere.au/app/img/tile.png" />
<meta name="msapplication-square70x70logo" content="http://mysite.somwhere.au/app/img/tiny.png"/>
<meta name="msapplication-square150x150logo" content="http://mysite.somwhere.au/app/img/square.png"/>
<meta name="msapplication-wide310x150logo" content="http://mysite.somwhere.au/app/img/wide.png"/>
<meta name="msapplication-square310x310logo" content="http://mysite.somwhere.au/app/img/large.png"/>
<![endif]-->

由于某种原因，这不起作用。我可以成功导航到“内容”部分中所述的每张图片，并且可以正常显示图片。

然后我尝试了 xml，希望这可能有效。 我的 html 头部分看起来像这样：

<!--[if IE]>
<meta name="application-name" content="My App"/>
<meta name="msapplication-config" content="http://mysite.somewhere.au/app/browserconfig.xml" />
<![endif]-->

我知道如果我使用默认名称“browserconfig.xml”，则此处不需要 msapplication-config，但无论如何我认为 id 是明确的...

我的 xml 看起来像这样：

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
   <tile>
     <square70x70logo src="http://mysite.somewhere.au/app/img/tiny.png"/>
     <square150x150logo src="http://mysite.somewhere.com.au/app/img/square.png"/>
     <wide310x150logo src="http://mysite.somewhere.au/app/img/wide.png"/>
     <square310x310logo src="http://mysite.somewhere.au/app/img/large.png"/>
     <TileColor>#ffffff</TileColor>
   </tile>
 </msapplication>
</browserconfig>

知道为什么显示收藏图标而我的图片没有显示吗？尝试取消固定和重新固定，但没有运气。我用这个网站来帮助我：http://www.buildmypinnedsite.com/

提前致谢！

【参考方案1】：

删除 <!--[if IE]> 和 <![endif]-->，Windows 8.x 附带 IE10+，不再支持条件 cmets。

【讨论】：

感谢您的回答，但是 IE11 在用户固定站点时会自动读取文件 browserconfig.xml，因此即使没有任何元标记，它是否应该不读取此文件并使用指定的图像？ See Reference

这并没有解决问题，但我会记得在以后删除这些。谢谢

【参考方案2】：

发现问题了！ browserconfig.xml 不在我的“登录过滤器”排除列表中，但图像...所以访问 browserconfig.xml 将我重定向到登录页面。

我一直可以访问browserconfig.xml，因为我在进行测试时登录了我的浏览器。我在这里学到但未能实施的一个教训是也在隐身模式下测试一个页面。如果我这样做了，我会更早发现这一点。

【讨论】：

奇怪...在更改图像后它又坏了！然后恢复这些图像也不再起作用了... Windows 是否在某处存储图像缓存？如果是这样，清除它会有所帮助吗？

【参考方案3】：

解决了。

使用 browserconfig.xml 方法时效果最佳。

将此添加到您的元数据中：

<meta name="msapplication-config" content="/app/browserconfig.xml" />

如果您之前添加了图像进行测试，然后希望更改图像，Windows 似乎会缓存此图像，而清除 Windows 缓存似乎会让某些用户感到沮丧，所以...

我在图片网址的“?1”末尾添加了一个参数。这似乎向 Windows 暗示内容是动态的，因此会重新加载图像。我想一旦它完成了这个技巧，你就可以删除它......

我的 browserconfig.xml 现在看起来像这样：

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/app/img/smalltile.png?1"/>
      <square150x150logo src="/app/img/mediumtile.png?1"/>
      <wide310x150logo src="/app/img/widetile.png?1"/>
      <square310x310logo src="/app/img/largetile.png?1"/>
      <TileColor>#ffffff</TileColor>
    </tile>
  </msapplication>
</browserconfig>

现在它可以完美运行了。感谢您对此解决方案的反馈。

编辑：

经过严格的测试和挫折后，在使用相对路径时，它可以正常运行并反复使用。在我们的例子中，站点是（比如）www.myapp.com，但 java web 服务器被称为 /app，所以 www.myapp.com/app 是根目录。

<meta name="msapplication-config" content="/app/browserconfig.xml" />

browserconfig 中的 src 与您正在查看的页面相关！所以最好在这里使用完整路径，以防他们固定页面/app/orders/index.jsp。所以 src 变成了

src="/app/img/myimage.png?2"

现在效果很好。