Question

<img :src="project.thumbnails.small[0]" 
         class="card-img-top"
         :srcset="`${project.thumbnails.small[0]} 300w, ${project.thumbnails.medium[0]} 900w, ${project.thumbnails.high[0]} 1400w`"
         sizes="(min-width: 300px) 90vw, (min-width: 768px) 20vw, (min-width: 991px) 10vw" 
         width="100%"
         :alt="project.title">

当视口大于991px时，图像的宽度仅为视口的10％;因此浏览器应该获得900w或300w的图像，而是下载1400w的图像。我在这做错了什么？

这是在浏览器中呈现的代码。

<img data-v-5857f165="" src="http://placehold.it/330x330" 
 srcset="http://placehold.it/330x330 300w, http://placehold.it/900x900 900w, http://placehold.it/1400x1400 1400w" 
 sizes="(min-width: 300px) 90vw, (min-width: 768px) 20vw, (min-width: 991px) 10vw" 
 width="100%" alt="sit amet" class="card-img-top">

如果相关，我使用的是Chrome版本57.0.2987.133（64位）。

Answer 1

我想我已经解决了这个问题。

如果Chrome位于缓存中，则会显示高质量的图片。如果口袋里已有更高质量的图像，为什么要下载更低质量的图像，对吧？请参阅this article。

接下来，修改媒体查询的大小顺序，从高到低：

<img :src="project.thumbnails.small[0]" 
         class="card-img-top"
         :srcset="`${project.thumbnails.small[0]} 300w, ${project.thumbnails.medium[0]} 900w, ${project.thumbnails.high[0]} 1400w`"
         sizes="(min-width: 991px) 10vw, (min-width: 768px) 20vw, 300px" 
         width="100%"
         :alt="project.title">

浏览器无法下载正确的响应图像

1 个答案: