如何通过CSS/Sass媒体查询动态修改img标签src属性

Sass是CSS预处理器，最终编译输出的只有静态CSS规则，CSS本身没有能力修改DOM元素的src属性，你没法通过Sass编写媒体查询直接控制<img>标签的src值，这是前端技术的边界决定的，和Sass写法无关。

结合你已经在用Bootstrap断点、自建带width参数的图片裁剪服务的现状，有三个成熟方案可选：

方案1：使用原生srcset属性（首屏图片首选，零额外开销） #

这是HTML原生为响应式图片设计的标准属性，完全匹配你按视口宽度加载对应尺寸图片的需求，不需要额外写CSS或JS，浏览器会自动根据当前视口宽度、设备像素比选择最合适的资源加载，性能最优。
你只需要在img标签上配置和Bootstrap断点对齐的图片规则即可：

<img 
  src="assets/img/myImage?width=1200" 
  srcset="assets/img/myImage?width=576 576w,
          assets/img/myImage?width=768 768w,
          assets/img/myImage?width=992 992w,
          assets/img/myImage?width=1200 1200w,
          assets/img/myImage?width=1400 1400w"
  sizes="100vw"
  alt="对应图片的描述文本"
  class="img-fluid"
>

注意：

• 上面的宽度值完全对齐Bootstrap默认断点：sm=576px、md=768px、lg=992px、xl=1200px、xxl=1400px，和你之前写Sass媒体查询用的断点规则完全统一
• 如果图片不是占满整个视口宽度，修改sizes属性为图片实际占据的CSS宽度值，浏览器选择图片的精度会更高
• 加上Bootstrap自带的img-fluid类，即可自动实现图片自适应容器宽度，不需要额外写样式

方案2：转为CSS背景图实现（纯装饰图首选，改造成本最低） #

如果你一定要在Sass中通过媒体查询控制图片加载地址，可以把对应<img>替换为块级容器，把图片作为background-image设置，直接复用你已经在首页背景图上跑通的逻辑即可。
首先在Sass中复用Bootstrap官方提供的断点mixin：

.responsive-decorate-img {
  width: 100%;
  // 按图片原始比例设置宽高比，避免加载时出现布局偏移
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center;
  // 默认加载小屏尺寸图
  background-image: url('assets/img/myImage?width=576');

  @include media-breakpoint-up(md) {
    background-image: url('assets/img/myImage?width=768');
  }
  @include media-breakpoint-up(lg) {
    background-image: url('assets/img/myImage?width=992');
  }
  @include media-breakpoint-up(xl) {
    background-image: url('assets/img/myImage?width=1200');
  }
}

对应的HTML结构：

<div class="responsive-decorate-img" role="img" aria-label="对应图片的描述文本"></div>

这个方案的缺点是语义化弱于原生img标签，SEO和屏幕阅读器支持较差，仅适合无内容意义的纯装饰性大体积图片使用。

方案3：少量JS辅助动态修改src（复杂交互场景可选） #

如果你的图片有点击、懒加载等复杂交互逻辑必须保留<img>标签，可以写一小段原生JS，对齐Bootstrap断点阈值监听视口变化，动态修改img的src属性：

// 断点值和Bootstrap、Sass配置保持完全一致
const breakpoints = { sm: 576, md: 768, lg: 992, xl: 1200, xxl: 1400 }
const targetImg = document.querySelector('.need-responsive-img')

function updateImgSrc() {
  const viewportWidth = window.innerWidth
  let fitWidth = breakpoints.sm
  if (viewportWidth >= breakpoints.xxl) fitWidth = breakpoints.xxl
  else if (viewportWidth >= breakpoints.xl) fitWidth = breakpoints.xl
  else if (viewportWidth >= breakpoints.lg) fitWidth = breakpoints.lg
  else if (viewportWidth >= breakpoints.md) fitWidth = breakpoints.md
  targetImg.src = `assets/img/myImage?width=${fitWidth}`
}
// 页面初始化时执行一次
updateImgSrc()
// 视口尺寸变化时加防抖执行，避免频繁触发
window.addEventListener('resize', () => {
  clearTimeout(window.resizeTimer)
  window.resizeTimer = setTimeout(updateImgSrc, 100)
})

这个方案的缺点是JS加载执行前浏览器会先加载img默认src的资源，存在小幅的资源浪费，仅建议非首屏的交互型图片使用。

• 首屏内容类、有SEO需求的图片优先选srcset方案，原生性能最好，语义化合规
• 纯装饰性、无SEO需求的图片优先选CSS背景图方案，直接复用现有逻辑改造成本最低
• 带复杂交互、必须保留img标签的非首屏图片再选JS方案

内容的提问来源于stack exchange，提问作者Balalayka