Почему не отображается картинка при использовании vue-cli?

Question

[Никита]

Доброго времени суток! Почему при использовании статических путей img в компонентах vue, при запуске npm run serve или npm run build изображения не билдятся и вообще отсутствуют на странице.

Вот так все работает корректно

body {
    background-image: url('../img/body-backgr.jpg');
    height: 100vh;
    overflow-x: hidden;
    background-size: cover;
}

А вот так изображения не появляются на странице
<img src="/assets/img/body-backgr.jpg">
Структура проекта

Comments

[Михаил]

<img :src="require('/assets/img/body-backgr.jpg')">

[Никита]

Михаил, #такнеработает

[Михаил]

Никита Пурыга, тогда пути поправьте https://vue-loader.vuejs.org/guide/asset-url.html#...

Answer 1

[Никита]

Проблема заключалась в том, что я заработался и совсем забыл про хэширование файлов. Я пытался обратиться к файлу без хэша, которого просто-напросто не существовало. Спасибо всем, кто попытался помочь!

Answer 2

[Дмитрий Беляев]

Так /assets/img/body-backgr.jpg будет искать от корня файловой системы

Резолвом модулей разруливает webpack, можно сделать alias @ для папки src, тогда можно будет писать так: @/assets/img/body-backgr.jpg

https://cli.vuejs.org/guide/webpack.html#simple-co...
https://webpack.js.org/configuration/resolve/#reso...