img srcset в проекте vue-cli приводит к ошибке компиляции

Question

У меня есть изображение для проекта vue-cli, и оно отлично работает по следующему пути:

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

Но когда я вставляю URL изображения с srcset для точек останова адаптивного изображения, я вижу ошибку компиляции.

Вот сгенерированный код изображения:

<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-адресах. Он просто разбивает строку 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, чтобы они соответствовали.