SCSS中封装image-set()需用@mixin规范路径、单位和fallback顺序，确保构建后路径正确、HTTP状态正常，否则背景失效。
SCSS里用@mixin封装image-set()要带单位和引号
直接写image-set()容易漏掉1x里的x，或者路径没加引号——Sass编译器不会报错，但浏览器解析失败后整条background-image声明被丢弃，背景就空了。SCSS本身不校验image-set()语法，得靠人工盯住格式。
推荐写法：@mixin retina-bg($path, $ratio: 2) { background-image: url("#{$path}"); background-image: image-set("#{$path}" 1x, "#{$path}@#{$ratio}x" #{$ratio}x); }
-
$path必须是字符串（如"hero-bg.jpg"），不能是无引号变量，否则构建后路径拼接出错 -
@#{$ratio}x后缀和#{$ratio}x单位要严格对应，2x不能写成2或2.0x - 若需3x图，别硬编码进mixin，改用列表参数传入多套路径，避免生成无效
3x却没对应文件
兼容旧浏览器时fallback顺序不能颠倒
Firefox 32+虽支持image-set()，但只认url() fallback；Edge 12–18和IE则完全忽略该函数。CSS解析规则是“遇到无法识别的值，整条声明失效”，所以url()必须写在image-set()前面，否则旧浏览器连默认图都看不到。
错误写法：background-image: image-set("a.jpg" 1x, "a@2x.jpg" 2x); background-image: url("a.jpg");（后者被前者覆盖）
正确写法：background-image: url("a.jpg"); background-image: image-set("a.jpg" 1x, "a@2x.jpg" 2x);
本地 Ollama 文生图工具。使用 x/z-image-turbo 模型生成图片，分辨率 1024x1024，每张图约耗时 90 秒。当用户说"生成图片"、"文生图"、"画一张图"、或提交中文提示词生成图像时使用。
- Webpack/Vite处理时，
url()路径和image-set()内路径必须指向同一构建产物，否则CDN缓存不一致 - Safari对404敏感：只要
image-set()中任一图返回404，整个函数被抛弃，fallback也不生效——上线前得用curl -I批量检查所有倍图HTTP状态码
媒体查询方案更适合需要宽度+像素比双重判断的场景
纯image-set()只响应DPR，不看视口宽度。比如设计稿要求「小屏用400w@2x、大屏用1200w@1x」，这种组合逻辑它做不到，必须切到@media。
SCSS里可这样组织：@mixin responsive-bg($small, $large) { background-image: url($small); @media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 1), (min-width: 768px) and (min-resolution: 1dppx) { background-image: url($large); } }
- 注意
min-resolution: 1dppx是标准写法，min-resolution: 192dpi等效但兼容性差，别混用 - 所有
@media块内的background-image都会被浏览器预加载，哪怕最终没匹配上——流量敏感场景要权衡 - 如果用
srcset语义化图片更合适（如banner图），就别硬套背景图方案，
构建工具路径别名在image-set()里不生效
Webpack的~assets/或Vite的/src/assets/别名，在image-set()函数内部不会被解析。Sass编译阶段只做字符串拼接，构建工具的URL重写逻辑压根不触达这里。
结果就是开发时路径对，构建后404。最稳做法是统一用相对路径，比如../images/logo@2x.png，并确保SCSS文件和图片在源码中位置关系固定。
- 若必须用别名，得配
css-loader的url: true选项或Vite的css.preprocessorOptions.sass.additionalData注入变量 - CI流程里加一步检查：提取所有SCSS中
image-set()的路径，用find命令验证是否存在对应文件 - 别在
image-set()里手动加?v=xxx版本号，哈希应由构建工具统一生效，否则缓存策略失效
真正难的不是写对语法，而是让所有倍图在构建后精准落到CDN对应路径、且HTTP状态全为200——这步漏掉，再漂亮的SCSS mixin也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
