vue-cli项目中img srcset导致编译报错

Question

我有一个 vue-cli 项目的图像，它在以下路径下工作正常：

<img src="../assets/images/banner/hero_2x_w4eyw5_c_scale,w_2086.jpg" alt="">

但是当我为响应图像断点插入带有 srcset 的图像 URL 时，我看到编译错误。

这里是生成的图片代码：

<img sizes="(max-width: 3840px) 100vw, 3840px" 
    srcset="../assets/images/banner/hero_2x_w4eyw5_c_scale,w_320.jpg 
    320w,../assets/images/banner/hero_2x_w4eyw5_c_scale,w_1099.jpg 
    1099w,../assets/images/banner/hero_2x_w4eyw5_c_scale,w_1647.jpg 
    1647w,../assets/images/banner/hero_2x_w4eyw5_c_scale,w_2086.jpg 
    2086w,../assets/images/banner/hero_2x_w4eyw5_c_scale,w_2460.jpg 
    2460w,../assets/images/banner/hero_2x_w4eyw5_c_scale,w_2848.jpg 2848w, 
    ../assets/images/banner/hero_2x_w4eyw5_c_scale,w_3214.jpg 
    3214w,../assets/images/banner/hero_2x_w4eyw5_c_scale,w_3556.jpg 
    3556w,../assets/images/banner/hero_2x_w4eyw5_c_scale,w_3805.jpg 
    3805w,../assets/images/banner/hero_2x_w4eyw5_c_scale,w_3840.jpg 3840w"
    src="../assets/images/banner/hero_2x_w4eyw5_c_scale,w_3840.jpg" alt="">

错误！

Answer 1

错误发生是因为 vue-loader 没有处理 srcset filenames/URLs 中的逗号。它只是 splits the srcset string by ,，因此 ../assets/images/banner/hero_2x_w4eyw5_c_scale,w_320.jpg 的第一个 srcset 值被解析为 ../assets/images/banner/hero_2x_w4eyw5_c_scale，导致您的屏幕截图出现 Module not found 错误。

MDN docs表示srcset值为comma-delimited，不清楚filenames/URLs中是否允许逗号。在任何情况下，您都可以通过重命名文件以删除逗号并更新 srcset 中的引用以匹配来解决构建错误。

vue-cli项目中img srcset导致编译报错

img srcset in vue-cli project results in compile error

vue.js

vue-component

vuejs2

vue-cli-3

错误！