如何根据屏幕大小获取图片

@media (max-width: 768px) {
  .image {
    background-image: url('small.jpg');
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .image {
    background-image: url('medium.jpg');
  }
}

@media (min-width: 1025px) {
  .image {
    background-image: url('large.jpg');
  }
}

var screenWidth = window.innerWidth;

if (screenWidth < 768) {
  var image = new Image();
  image.src = 'small.jpg';
  document.getElementById('image-container').appendChild(image);
} else if (screenWidth >= 768 && screenWidth < 1024) {
  var image = new Image();
  image.src = 'medium.jpg';
  document.getElementById('image-container').appendChild(image);
} else {
  var image = new Image();
  image.src = 'large.jpg';
  document.getElementById('image-container').appendChild(image);
}

<picture>
  <source media="(max-width: 768px)" srcset="small.jpg">
  <source media="(min-width: 769px) and (max-width: 1024px)" srcset="medium.jpg">
  <source media="(min-width: 1025px)" srcset="large.jpg">
  <img src="fallback.jpg" alt="Fallback Image">
</picture>