Vue

by RomainMazB

HTML

<div id="app" style="width: 1980px; height: 1020px; background-color: grey;">

  <photos :modeles_images="modeles_images"></photos>

</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

Vue.component('photos', {
    props: {
        modeles_images: Array
        // datas: null
    },
    methods: {
    	style(item) {
      	return 'position:absolute; width: '+item.WIDTH +'px; height: '+item.HEIGHT+'; left: '+item.POS_X +'px; top: '+item.POS_Y +'px';
      }
    },
    template: `
    <div>
        <ul>
        <li v-for="item in modeles_images">
					<img src="https://placekitten.com/g/150/150" :style="style(item)">
        </li>
        </ul>
    </div>
    `
}),
new Vue({
  el: "#app",
  data: {
    modeles_images: [
  {
    "POSITION": "TOP",
    "POS_X": 1049,
    "POS_Y": 448,
    "WIDTH": 300,
    "HEIGHT": 184
  },
  {
    "POSITION": "1",
    "POS_X": 1180,
    "POS_Y": 40,
    "WIDTH": 340,
    "HEIGHT": 490
  },
  {
    "POSITION": "2",
    "POS_X": 1540,
    "POS_Y": 40,
    "WIDTH": 340,
    "HEIGHT": 490
  },
  {
    "POSITION": "3",
    "POS_X": 1180,
    "POS_Y": 550,
    "WIDTH": 700,
    "HEIGHT": 490
  }
] 
  }
})