[英]img srcset in vue-cli project results in compile error
I have an image for a vue-cli
project, and it works fine with the following path: 我有一个
vue-cli
项目的图片,可以通过以下路径正常工作:
<img src="../assets/images/banner/hero_2x_w4eyw5_c_scale,w_2086.jpg" alt="">
But when I insert image URLs with srcset
for responsive image breakpoints, I see a compile error. 但是,当我插入带有
srcset
图像URL作为响应图像断点时,我看到了编译错误。
Here is the generated image code: 这是生成的图像代码:
<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="">
The error occurs because vue-loader
does not handle commas in srcset
filenames/URLs. 发生错误是因为
vue-loader
无法处理srcset
文件名/ URL中的逗号。 It simply splits the srcset
string by ,
, so the first srcset
value of ../assets/images/banner/hero_2x_w4eyw5_c_scale,w_320.jpg
is parsed as ../assets/images/banner/hero_2x_w4eyw5_c_scale
, leading to the Module not found
error in your screenshot. 它简单地拆分
srcset
通过串,
,所以第一个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 indicate that the srcset
values are comma-delimited, and it's unclear whether the commas are permitted within the filenames/URLs. MDN文档指示
srcset
值是用逗号分隔的,并且不清楚在文件名/ URL中是否允许使用逗号。 In any case, you could resolve the build errors by renaming your files to remove the commas, and updating the references in your srcset
to match. 无论如何,您都可以通过重命名文件以删除逗号并更新
srcset
的引用以使其匹配来解决构建错误。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.