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文件名/ URL中的逗号。它只是splits the srcset string by ,，因此srcset的第一个../assets/images/banner/hero_2x_w4eyw5_c_scale,w_320.jpg值被解析为../assets/images/banner/hero_2x_w4eyw5_c_scale，导致屏幕快照中出现Module not found错误。

MDN docs表示srcset值是用逗号分隔的，并且不清楚在文件名/ URL中是否允许使用逗号。无论如何，您可以通过重命名文件以删除逗号并更新srcset中的引用以使其匹配来解决构建错误。