Почему не отображаются изображения?

Question

[lookingfor2]

в компоненте подключаю файл scss

<style lang="scss">
@import "../../style/components/menu";
</style>

сам css

.menu {
  &__link {
    &:nth-of-type(1) {
      background: url("/static/images/icons/project.svg") no-repeat 50% 50%;

    }
  }
}

Картинок не видно, ошибок ни в компиляторе ни в консоли нет

Comments

[Вадим]

а отладчик что говорит? На итоговый путь в разметке посмотрите и проверьте, она открывается вообще.
Если блок не нулевой высоты\ширины, то либо картинки по этому пути нет, либо путь не корректен, что, в принципе, одно и то же.

[dk-web]

по моему statice в пути лишнее

[lookingfor2]

dk-web, это название папки

[lookingfor2]

Вадим, я с css могу перейти по указанному пути к картинке, но в отладчике, когда пытаюсь открыть в новой вкладке, не вижу

[Вадим]

lookingfor2, ну вот классика жанра. Небось указали путь относительно CSS файла а не итоговой сборки

[lookingfor2]

Вадим, подскажите пожалуйста, я пытаюсь сказать, что у меня изображение лежит, в src/... с помощью @

&::after {
      position: absolute;
      content: "";
      width: 35px;
      height: 30px;
      background: url("@/static/images/icons/search-icon_templates.svg") no-repeat 50% 50%;
      right: 0;
      top: 0;
    }

В итоге подставляется ./ перед @ и путь неверный,

Error: Can't resolve './@/static/images/icons/search-icon_templates.svg'

как мне указать путь с файла scss, который подключен к компоненту? я могу подняться на 2 уровня выше ../../, и тогда он увидит изображение, но это неправильно же, в каждом компоненте указывать такой путь, подниматься на другие уровни?

[Вадим]

lookingfor2, Разобрались? Или ещё актуально?

[lookingfor2]

Вадим, добрый день, та в целом нужно просто посмотреть настройки вебпака, насколько я понимаю, а проект собран с помощью vuecli, можно ли интегрировать свои настройки вебпака? ибо сейчас они где то в nodemodules

[Вадим]

lookingfor2, Да, Вы можете доопределить настройки с помощью vue.config.js

По Вашему вопросу - не встречал чтобы псевдоними обрабатывались в scss. Думаю поэтому ваша @ не работает в пути до картинки в стилях.
Если, например, все картинки в итоге попадают в assets/images/my_awesome_image.jpg то в scss файле в компоненте Вам так и нужно указать.

[Вадим]

lookingfor2, Если обратить внимнаие на Ваш скрин в комменте ниже, то вам просто нужно убрать собаку и оставить только /static...

[lookingfor2]

Вадим, спасибо большое !)

Answer 1

[ThunderCat]

чет я сомневаюсь что у вас картинка лежит по адресу

http://yourdomain.tld/static/images/icons/project.svg

Comments

[lookingfor2]

вот пример на старом проекте, именно его перенесли на новый лад, и не работает


сейчас все так же, пути те же, картинки есть, но их не видно