Issue with checking image size in Velo

Ask the community
, ,
1

I am trying to set the header section background of blog post depending on the size of the cover image. I am using the following code:

async function initPage() {
    const currentPost = await $w("#post1").getPost();
    if (currentPost.coverImage.width >= 980 && currentPost.coverImage.height >= 550 && currentPost.coverImage.width/currentPost.coverImage.height > 1) {
        $w('#postHeaderSection').expand();
        $w('#postHeaderSection').background.src = currentPost.coverImage.replace(/#[\s\S]*/, "");
        $w("#postTitle").text = currentPost.title;
    } else if (currentPost.coverImage.width >= 491 && currentPost.coverImage.height >= 660 && currentPost.coverImage.width/currentPost.coverImage.height <= 1) {
        $w('#secondPostHeaderSection').expand();
        $w('#postHeaderSquare').background.src = currentPost.coverImage.replace(/#[\s\S]*/, "");
        $w('#secondPostTitle').text = currentPost.title;
    } else {
        $w("#titleBox").expand();
    }
}

However, the code doesn’t seem to work and I’m not sure what could be causing the issue. I noticed that when I log currentPost.coverImage, it returns a string that starts with (“wix:image://v1/nsplsh_d0b1c2e1e12e4eeba81adec5c8605175~mv2.jpg/nsplsh_d0b1c2e1e12e4eeba81adec5c8605175~mv2.jpg#originWidth=4000&originHeight=6000” ) instead of an actual image object. Could this be the reason why the image size check is not working as expected?
I’ve also tried using a simpler version of the code, which works:

async function initPage() {
    const currentPost = await $w("#post1").getPost();
    $w("#postTitle").text = currentPost.title;
    $w("#postHeaderSection").background.src = currentPost.coverImage;
}

If so, how can I properly access the image object to check its size? Any help would be greatly appreciated. Thank you!