如何在不添加更多類的情況下將背景圖像添加到 Div 內的 html？

Question

我正在處理我的項目，該項目涉及使用 map 並在彈出窗口中添加位置。 在這些位置中，我添加了位置名稱、圖像和地址。 不幸的是，圖像沒有出現。 我已經嘗試了幾個源鏈接，但它要么不顯示，要么顯示一個似乎已被剪切的非常小的圖像。 這是我到目前為止所做的：

//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

好的，這就是我所做的

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

有了這個圖像出現了，現在的問題是它正在重復，所以我嘗試了這個：

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

但是當我添加“不重復”時，圖像又消失了

Answer 3

我設法弄清楚了！ 感謝大家！

這就是我所做的：

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