带有src集的Vue中的响应式图片标签

<template>
  <div>
    <img :src="imageUrl" :srcset="imageSrcset" alt="Responsive Image">
  </div>
</template>

data() {
  return {
    imageUrl: 'default.jpg',
    imageSrcset: 'default.jpg 1x, medium.jpg 2x, large.jpg 3x'
  }
}

mounted() {
  const screenWidth = window.innerWidth;
  if (screenWidth <= 768) {
    this.imageUrl = 'small.jpg';
    this.imageSrcset = 'small.jpg 1x, medium.jpg 2x, large.jpg 3x';
  } else if (screenWidth <= 1024) {
    this.imageUrl = 'medium.jpg';
    this.imageSrcset = 'small.jpg 1x, medium.jpg 2x, large.jpg 3x';
  } else {
    this.imageUrl = 'large.jpg';
    this.imageSrcset = 'small.jpg 1x, medium.jpg 2x, large.jpg 3x';
  }
}