Unable to load some images

Hey @Kaverappa_K_U, thank you for reaching out! I am unsure here, but I’ve reached out internally to the teams for help. I’ll come back to you once I receive more information on this.

Appreciate your patience!

Thanks for the question. A couple things that will help us investigate:

• Can you share the code that is producing the error?
• Is this consistently happening for the same image file? If so, are you wiling to share the image and/or URL it is hosted from?

Hi @jefflee,

Thanks for the response.
I have attached the function I am using to display the picture and also the image urls which are throwing errors.

async function loadImage(frame: FrameNode, imageUrl: string) {
  try {
    // Create the image from the URL
    console.log(imageUrl)
    const image = await figma.createImageAsync(imageUrl);
    console.log(imageUrl)
    // Get the dimensions of the image
    const { width: imageWidth, height: imageHeight } = await image.getSizeAsync();
    // Check if the image exceeds Figma's maximum allowable dimensions
    const MAX_DIMENSION = 4096;
    console.log(imageWidth, imageHeight)
    if (imageWidth > MAX_DIMENSION || imageHeight > MAX_DIMENSION) {
      throw new Error('Image is too large to be processed by Figma.');
    }

    // Get the dimensions of the frame
    const frameWidth = frame.width;
    const frameHeight = frame.height;

    // Calculate the scaling factors to fit the image within the frame
    const widthScale = frameWidth / imageWidth;
    const heightScale = frameHeight / imageHeight;
    const scale = Math.min(widthScale, heightScale);

    // Calculate the scaled dimensions of the image
    const scaledWidth = imageWidth * scale;
    const scaledHeight = imageHeight * scale;
    console.log(scaledWidth, scaledHeight)
    // Create a rectangle node and resize it to match the scaled image dimensions
    const imageNode = figma.createRectangle();
    imageNode.resize(scaledWidth, scaledHeight);

    // Set the image as the fill of the rectangle node
    imageNode.fills = [{ type: 'IMAGE', imageHash: image.hash, scaleMode: 'FILL' }];

    // Position the image node in the center of the frame
    imageNode.x = (frameWidth - scaledWidth) / 2;
    imageNode.y = (frameHeight - scaledHeight) / 2;

    // Remove existing rectangle nodes from the frame
    frame.children.forEach(child => {
      if (child.type === 'RECTANGLE') {
        child.remove();
      }
    });

    // Append the rectangle node to the frame
    frame.appendChild(imageNode);
  } catch (error) {
    console.error('Error loading image:', error);
  }
}

Image urls:

Please let me know what’s the issue?

Thanks and Regards

Hey @jefflee

Thanks for the response.
I already sent you the code snippet and the urls.
But somehow it is hidden by the spam filter.
😦
BR

Got it, sorry about the content filters. What about posting as a Github gist?

I got what is the error though.
I am getting error in the Figma inbuilt function createImageAsync where if the image height or width is higher than 4096 pixels it throws this error.
How can i handle this as Figma’s createImageAsync only supports 4096

createImageAsync can only process images up to the documented limit. I’m not sure if there’s a solid workaround for that limit other than trying to preprocess the image outside of Figma.

If you’re just trying to detect when an image exceeds this limit, you can try the following:

let image
try {
  image = await.createImageAsync(url)
} catch (err) {
  // handle the error cases listed here:
  // https://www.figma.com/plugin-docs/api/properties/figma-createimageasync/#possible-error-cases
}

Yeah thank you for the reply.
🙂