srcset和sizes使用

<template>
  <img
    style="width: 15vw; height: 15vw"
    src="https://tse4-mm.cn.bing.net/th/id/OIP-C.vzKCXOrvgFud8Hrv_2Q0hAHaEK?rs=1&pid=ImgDetMain"
    srcset="
      https://tse4-mm.cn.bing.net/th/id/OIP-C.vzKCXOrvgFud8Hrv_2Q0hAHaEK?rs=1&pid=ImgDetMain/id/164/150   150w,
      https://tse4-mm.cn.bing.net/th/id/OIP-C.vzKCXOrvgFud8Hrv_2Q0hAHaEK?rs=1&pid=ImgDetMain/id/164/300   300w,
      https://tse4-mm.cn.bing.net/th/id/OIP-C.vzKCXOrvgFud8Hrv_2Q0hAHaEK?rs=1&pid=ImgDetMain/id/164/600   600w,
      https://tse4-mm.cn.bing.net/th/id/OIP-C.vzKCXOrvgFud8Hrv_2Q0hAHaEK?rs=1&pid=ImgDetMain/id/164/900   900w,
      https://tse4-mm.cn.bing.net/th/id/OIP-C.vzKCXOrvgFud8Hrv_2Q0hAHaEK?rs=1&pid=ImgDetMain/id/164/1500 1200w
    "
    sizes="(max-width:300px) 150vw,
    (max-width:600px) 30vw,
    (max-width:900px) 40vw,
    (max-width:1200px) 50vw,
    (max-width:1200px) 60vw,
    "
    alt=""
  />
  <!-- srcset图片原的集合   
    在响应式布局中使用
  window.devicePixelRatio 当前设备的dpr
  dpr = window.devicePixelRatio
  dpr = 1 
  dpr = 2 
  dpr = 3 
  dpr = 4 
  dpr = 5 
  dpr = 6 
  dpr = 7 
  dpr = 8 
  dpr = 9 
  dpr = 10 
  dpr = 11 
  dpr = 12
    https://tse4-mm.cn.bing.net/th/id/OIP-C.vzKCXOrvgFud8Hrv_2Q0hAHaEK?rs=1&pid=ImgDetMain/id/164/150 当我的dpr为1的时候
  
    假如我的图片是800 那么他就去松size去处理 
  -->
</template>

<script setup lang="ts"></script>

<style scoped></style>

在vue组件简单写了一下 本文章  主要是实现图片的加载的清晰度 和不同尺寸大小的情况下使用

解决我们图片加载的一个清晰度问题 自己做一个vw的响应式适配就行