时间戳

首页 > 解决方案 > 每个浏览器如何选择wordpress中的图片url？

javascript - 每个浏览器如何选择wordpress中的图片url？

问题描述

我正在使用主题 maidenhair 运行 wordpress，突然面临每个浏览器自动选择图像的源 url 的问题，该图像的源 url 独立于插入照片的帖子中的 url！

例如，我上传了一张名为“IMG-20180419-WA0009.png”的图片（尺寸为：561 像素 * 790 像素，分辨率为 72.009 像素/英寸）。wordpress 自动创建了两个其他版本的文件（另外两个大小以支持响应式图片），即：“IMG-20180419-WA0009-75x106.png”和“IMG-20180419-WA0009-150x150.png”，因为这些是我在 wordpress 的媒体尺寸设置中设置的尺寸。

在插入图片的帖子中，我将大小调整为如下截图： Post_screenshot

然后，当我从 Mozilla Firefox 浏览网站时，照片看起来正确、清晰、清晰且质量很高，如下图所示： Firefox_screenshot

因为照片的源网址看起来像： ImageURL_Firefox_screenshot

但是，如果我使用 Google Chrome 浏览网站，照片会显得不清晰、模糊且质量低下，如下图所示： Chrome_screenshot

因为照片的源 url 自动设置为较小版本之一的 url，它看起来像： ImageURL_Chrome_screenshot

有时恰恰相反！我上传了一张照片，然后 Google Chrome 从正确的 url 中提取它，但 Mozilla Firefox 决定只是从另一个文件中提取它！

标签： javascriptphpcsswordpress

解决方案

从您的<img>标签转储中可以看出，您的主题（或插件或服务器优化）正在添加src-set属性。

您可以在此处阅读更多信息。

正如我们所见，srcChrome 和 Firefox 都是一样的。两个浏览器可能不处理完全相同的 src-set。但我很确定您看到的像素化图像来自src-set.

所以 ：

  • 要确定问题出在哪里src-set，您可以尝试编辑模板以删除src-set属性并仅保留src。然后检查两个浏览器上的图像渲染。
  • 在测试时编辑你的src-set，看看是什么让一个浏览器搞砸了

推荐阅读