Recibo una URL de una imagen desde una BBDD. Lo que busco es obtener el ancho y el alto de la imagen para formar un carrusel. Para ello instancio un objeto imagen dentro de un bucle for, pero las dimensiones no las obtengo porque todavía no se carga. Para solucionarlo utilizo onload, pero no logro bindear el dato dentro de la funcion onload para recibirlo en $data en el componente de Vue js.
La estructura de dataphoto es correcta, si lo prueba fuera de onload funciona correctamente.
dataphoto": [
{
"id_foto": "107",
"nombre": "Chrysanthemum.jpg",
"ruta": "picsloaded/93/Chrysanthemum.jpg",
"toma": "93",
"width": 0,
"height": 0
}
....
]
getPictureData: function() {
var self = this;
var foto = [];
for (var i = 0; i < this.dataphoto.length; i++) {
foto = new Image();
foto.src = "/static/api/" + this.dataphoto[i].ruta;
foto.onload = (function(nr){
self.dataphoto[nr]["width"] = foto.width;
self.dataphoto[nr]["height"] = foto.height;
})(i);
}
},