При добавлении в качестве фона в div необходимо добавить «высоту» и «ширину», чтобы появилось фоновое изображение.

он не показывает:

 .phone {
  background-image: url(https://picsum.photos/300/300);
}

<div class = "phone"></div>

но он показывает:

 .phone {
  background-image: url(https://picsum.photos/300/300);
   height:300px;
   width:300px;
}

<div class = "phone"></div>

Если ваше файловое дерево правильное, все, что вам нужно сделать, это добавить ширину и длину. Вы не указываете браузеру, какой высоты и ширины должен быть телефон, поэтому он ничего не покажет.

 .phone {
  background-image: url(phone.png);
  width: 500px;
  height: 600px;
}

<div class = "phone"></div>

У меня нет вашего phone.png, но он должен быть таким.

Решение

Есть два способа импортировать изображение. 1. Использование HTML-тега.
2. Использование фона CSS.

When using css version, don't forget background-size and background-position.

Пример:

.image {
  background: url('path/to/img.png') no-repeat;
  background-size: contain; /*This scales the image accoding to the div*/
  background-position: center center; /*positions the image in the center*/
  width: auto;
  height: 50px;
}

<img src = "path/to/img.png" />

<div class = "image"></div>

извини, но у меня всегда одна и та же проблема: мой код TWIG:

<div class = "col-6">
  <div class = "phone">
  </div>

и мой код SASS:

.phone {
  background: url('phone.png') no-repeat;
  background-size: contain; /*This scales the image accoding to the div*/
  background-position: center; /*positions the image in the center*/
  width: auto;
  height: 50px;
}

и мои файлы тоже всегда одинаковы:

• главное меню
  • phone.png
  • menu.scss

у меня всегда ошибка 404 Спасибо

Может, стоит попробовать: ./phone.png.

.phone {
  background: url('./phone.png') no-repeat;
  background-size: contain; /*This scales the image accoding to the div*/
  background-position: center; /*positions the image in the center*/
  width: auto;
  height: 50px;
}