Kevin Powell - Community•11mo ago

Mason layout are not arranging itself in required format.

i'm using 3rd party library phot-album for displaying masonary layout what caused the problem? i believe the issue is caused by the fact that some of the images have forbidden access below is the function through which i'm handling the 403 forbidden error can someone please check and let me know if i'm handling the 403 error correctly? please note:in order to make sure mason works i need both width and height

export function addImageHeight(array) {
    // create an array of promises
    let promises = array.map((obj) => {
      // create a new promise for each object
      return new Promise((resolve, reject) => {
        // create a new Image instance
        let img = new Image();
        // set the src property to the image URL
        img.src = obj.src;
        // add an onload event handler
        img.onload = function () {
          // get the natural height and width of the image
          let height = img.naturalHeight || 0;
          let width = img.naturalWidth || 0;
          // create a copy of the object and add the height and width properties
          // let newObj = { ...obj, height, width };
          let newObj = { ...obj, height, width };
          // resolve the promise with the new object
          resolve(newObj);
        };
        // add an onerror event handler
        img.onerror = function () {
          // reject the promise with an error message
          // reject(`Failed to load image from ${obj.src}`);
          let height = 200;
          let width = 200;
          let src = "hide";
          // create a copy of the object and add the height and width properties
          let newObj = { ...obj, src, height, width };
          // resolve the promise with the new object
          resolve(newObj);
        };
      });
    });
    // return a promise that resolves with an array of new objects
    return Promise.all(promises);
  }

export function addImageHeight(array) {
    // create an array of promises
    let promises = array.map((obj) => {
      // create a new promise for each object
      return new Promise((resolve, reject) => {
        // create a new Image instance
        let img = new Image();
        // set the src property to the image URL
        img.src = obj.src;
        // add an onload event handler
        img.onload = function () {
          // get the natural height and width of the image
          let height = img.naturalHeight || 0;
          let width = img.naturalWidth || 0;
          // create a copy of the object and add the height and width properties
          // let newObj = { ...obj, height, width };
          let newObj = { ...obj, height, width };
          // resolve the promise with the new object
          resolve(newObj);
        };
        // add an onerror event handler
        img.onerror = function () {
          // reject the promise with an error message
          // reject(`Failed to load image from ${obj.src}`);
          let height = 200;
          let width = 200;
          let src = "hide";
          // create a copy of the object and add the height and width properties
          let newObj = { ...obj, src, height, width };
          // resolve the promise with the new object
          resolve(newObj);
        };
      });
    });
    // return a promise that resolves with an array of new objects
    return Promise.all(promises);
  }

2 Replies

unemployedOP•11mo ago

I forgot to mention Ive tried adding width and height as zero however the gap is still occuring this gaps are occuring only when images have 403 errors RESOLVED: I have to remove every data which has src = "hide" from the array

Jochem•11mo ago

you can just add the [solved] tag, I've done that for you. The rest is all automatic

Gaming

Programming

Mason layout are not arranging itself in required format.