Javascript 当每个元素需要不同的id时，如何通过只加载一次来多次使用同一个图像

我是编程和网络开发的新手。我正在做的项目只是为了练习，如果我的方法对你来说比较业余，请提出更好的选择

我正在尝试开发一个停车场预订系统。在UI中，我想显示所有空/满的插槽（就像在预订电影或公共汽车票时一样）

我找不到汽车的顶视图图标，所以我想用图像代替图标

但是对于图像，如果我在一个页面上使用50个图像，页面会变得非常沉重

但一件重要的事情是，我需要所有元素作为独立的实体，只有这样我才能用它们的id（唯一地址）预订它们。所以我想要50个不同的div，每个div有不同的id，但是我只想为所有插槽使用一个图像，或者最多使用两个不同的图像（记住方向）

我仔细阅读了这个答案，发现了一段可能有用的代码：

var imgSrc = 'http://lorempixel.com/100/100';

function generateImage() {
  var img = document.createElement('img')
  img.src = imgSrc;

  return img;
}

for (var i = 0; i < 20; i++ ) {
  document.body.appendChild(generateImage());
}

var-imgSrc=”http://lorempixel.com/100/100';
函数generateImage（）{
var img=document.createElement（'img'）
img.src=imgSrc；
返回img；
}
对于（变量i=0；i<20；i++）{
document.body.appendChild（generateImage（））；
}

虽然我可以使用javascript中的函数和循环创建一个图像的尽可能多的副本，但我不知道如何将它们分配到具有不同ID的不同div标记。

使用函数：）

const addMessage=（元素、消息、cls）=>{
const patt=new RegExp（“最好的方法是客户端已经以字符串的形式接收所有这些内容，但由于它明确表示这是为了研究，我推断它不打算使用后端来解决这个问题

let allContent = '';

for (var i = 0; i < 20; i++ ) {
  allContent += `<div class="wrapper-image"><img src="/path"></div>`
}

document.getElementById('idWrapper').innerHTML = allContent;

你可能从根本上误解了浏览器是如何做到这一点的——每次你对图像使用相同的URL时，浏览器都会重复使用它首先加载的图像，所以你“重复使用”"只需从每个
元素指向相同的URL即可创建图像。感谢@TheDev，您说这个问题可以在后端解决。看，我正在使用javaScript开发界面，然后我将使用php和sql创建数据库以及系统的所有内部工作。为了澄清，我刚刚开始学习我正在使用php和sql，所以我不知道php和sql的很多功能以及它们的连通性。但我的计划是使用前端来提供系统的所有视觉效果，而我只将后端用于系统的内部工作。将html编译到客户端是内部服务的一部分，您必须应用的逻辑是在一个确定的目录中，php执行所有这些逻辑（这个循环和这个迭代），然后向客户端发送已经准备好呈现的HTML，使用php的基本概念，您可以做到这一点，就像使用javascript一样简单，我在这里不教您，因为它会从问题的焦点淡出，但非常简单
let allContent = '';

for (var i = 0; i < 20; i++ ) {
  allContent += `<div class="wrapper-image"><img src="/path"></div>`
}

document.getElementById('idWrapper').innerHTML = allContent;

    let allContent = '';
    let imgOne = '/oneimg';
    let imgOne = '/twoImg';

    for (var i = 0; i < 20; i++ ) {
        if(i>10){
            allContent += `<div class="wrapper-image"><img src="${imgOne}"></div>`
        }else {
            allContent += `<div class="wrapper-image"><img src="${twoImg}"></div>`
        }
    }
    document.getElementById('idWrapper').innerHTML = allContent;