![](/img/trans.png)
[英]No property 'component' error after creating new project with vue-cli
[英]img srcset in vue-cli project results in compile error
我有一个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="">
发生错误是因为vue-loader
无法处理srcset
文件名/ URL中的逗号。 它简单地拆分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文档指示srcset
值是用逗号分隔的,并且不清楚在文件名/ URL中是否允许使用逗号。 无论如何,您都可以通过重命名文件以删除逗号并更新srcset
的引用以使其匹配来解决构建错误。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.