как я могу добавить фоновое изображение к моему html внутри Div без добавления дополнительных классов?

Question

Я работаю над своим проектом, который включает в себя работу с картой и добавление локаций во всплывающих окнах. В этих местах я добавил название места, изображение и адрес. К сожалению, изображение не появляется. Я пробовал несколько ссылок на источники, но они либо не отображаются, либо показывают очень маленькое изображение, которое, похоже, было вырезано. Вот что я сделал до сих пор:

// javascript (это только одно из мест, но у меня их гораздо больше)

var restaurantMarkers = [
      {
        coords: { lat: 59.9178541, lng: 10.7339675 },
        content:
          '<div class="marker"><h6>Den Glade Gris</h6><img src="../images/restaurant1.jpg" alt="1" /><br><p>St. Olavs Gate 33</p></div>',
      },

// CSS ( если я добавлю фоновое изображение к css, изображение появится, но это означает, что мне придется создать несколько классов, чтобы добавить фоновое изображение в мои местоположения, а у меня их около 60.

.marker{
    
    width: 120px;
    height: 110px;
}

Answer 1

Маршрутизация в отдельных файлах JS начинается с того места, откуда были «включены» файлы JS. Итак, если ваша файловая структура выглядит так:

root/
├── index.html
└── assets/
    └── images/
      └── restaurant1.jpg
    └── js/
      └── googlemaps.js

И ваш файл javascript связан с index.html, вам нужно начать маршрутизацию оттуда (например, background-image: url(assets/images/restaurant1.jpg)).

Или, если ваша файловая структура выглядит так:

root/
├── index.html
└── views/
    └── map.html
└── assets/
    └── images/
      └── images.jpg
    └── js/
      └── googlemaps.js

И ваш javascript файл связан с view/map.html, вам нужно начать маршрутизацию оттуда (например, background-image: url(../assets/images/restaurant1.jpg)).

Имейте в виду, это примеры, ваша файловая структура, вероятно, отличается.

Answer 2

Удалось разобраться! Всем спасибо!

вот что я сделал:

<div class="marker" style="background: url(assets/images/restaurant1.jpg) no-repeat center">

Answer 3

хорошо, вот что я сделал

background-image: url(assets/images/restaurant1.jpg);

с этим появляется изображение, проблема в том, что оно повторяется, поэтому я попробовал это:

background-image: url(assets/images/restaurant1.jpg) no-repeat;

но когда я добавляю "no-repeat" изображение снова пропало