GAE + Blobstore：根据视口宽度提供不同的图像大小

Question

我们知道，我们可以使用 blobstore 的 serving url 来提供图像，并附加 =sXX 以指示图像的宽度：

<!-- serving an image of 600px width -->
<img src="{{serving_url}}=s600" alt=""/>

除了出于明显的 webperf 原因，我们希望为较小的屏幕提供较小的图像外，这效果很好。我们如何根据屏幕尺寸提供不同的图像宽度？

感谢任何提示。

Answer 1

您可以使用 javascript 轻松完成此操作，基本技术是在评估您感兴趣的媒体查询后更改 src 属性。

对于初学者，我会在评估之前避免填充图像的 src，因此默认情况下不会加载完整图像；像这样：

<img data-src="{{serving_url}}" height="240" width="320">

这里我们在数据属性中渲染了 url，这样我们稍后就可以在脚本中访问它。我还添加了一个默认大小，因此 space 被保留，但这当然是可选的。

现在，我们可以使用 Window.matchMedia() 来评估我们的查询字符串：

var mql = window.matchMedia('(max-device-width: 667px)')
if (mql.matches) {
    // we're probably running on an iPhone6!
    img.src = img.dataset.src + '=s667'
}

已使用完美尺寸获取图片！

我包含了一个工作片段，它可以很容易地扩展为许多查询测试供您尝试。

var img = document.querySelector('img')
  , mql = window.matchMedia('(max-device-width: 667px)')
  , size = 1200
if (mql.matches) {
    size = 667
}
img.src = img.dataset.src + '=s' + size

img {
    object-fit: contain;
}

<img
    data-src="http://lh4.ggpht.com/TgjDT-cPRr6bjrpSVQeILk93o4Ouzjo1ygMB6KpmnCHhyH5vJKKRrqxCD2bC3T09CRIP6h5QFsV_l0hnhio5bN7z"
    height="240"
    width="320"
    >

测试图片由 this question. I'm also using object-fit 友情 "provided" 因为它（对我来说）有意义。

GAE + Blobstore：根据视口宽度提供不同的图像大小

GAE + Blobstore: Serve different image size depending on viewport width

html

javascript

google-app-engine

image

blobstore