<template>
<q-page class="page bg-brown-2 q-pa-lg">
<div v-for="x in 15" :key="x" class="line flex flex-center row">
<div v-for="y in 24" :key="y" class="pic">
<q-img :src="require('../assets/Pictures/' + getImageId(x,y) + '.png')"></q-img>
</div>
</div>
</q-page>
</template>
<script>
export default ({
name: 'BigPicturePage',
methods: {
getImageId(row, col) {
let picture_id = 359 - ((row - 1) * 24) + (col - 1)
return picture_id
},
}
})
</script>
So i want to generate an image grid with rows and columns to display a large image composed of many smaller images of the same size in vue.js. First i loop through the rows and create 15 of them (the whole picture is 15x24 pictures) with v-for, while having the x counter to iterate. Inside i use another v-for to fill every row with 24 columns. If i just give y inside the url as number, it renders the same row 15 times but it works. When i try to use a simple function getImageId(rows, columns) then it doesn´t render anything and the whole site stays blank. The calculations on the Image Id´s is based on a 0 - 359 count but in reverse to get the right line-up of the pictures. I subtract from 359 the rows minus 1, because the range starts with 1 from what i found out, times 24 to get the start index of each row. After that i add the current column index to count incrementally down from 359 to 0 from row to row and column to column. I guess the problem lies in my usage of the vue syntax and structure, since im not too well accustomed to it. Any help is welcome.
I found out, that the site tries to load the picture with the id of 360 but it is not present and i designed the whole function for the id´s to not get above 359 in any way, so i don´t know why...
You did not design the function that way. With 1 and 2 you get that result.. If you want all images from 359 to 0, why don't just fetch them and then show them in order?
console.log(test(1,1)) // 359
console.log(test(1,2)) // 360
function test(row, col) {
return 359 - ((row - 1) * 24) + (col - 1)
}