<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的响应式适配就行