I can not set width/height of uploaded with with JS code

In Laravel 8 / tailwindcss 2 / Alpinejs 2.8 app I have a form when current image is shown and new image 1) can be selected with preview and 2) Saved by Js code with axios request 3) on successfull upload current image is replaces with new preview image and I have a problem when current image has big size then new uploade image looks broken. I try to fix it with js code setting size to image on the form size of new uploaded file :

window.axios.post('/admin/settings/app_big_logo/images/upload', mageUploadData).then((response) => {
    let img_app_big_logo = document.querySelector("#img_app_big_logo")  // show uploaded image @endsection the form
    if (img_app_big_logo) {
        // set new uploaded image
        img_app_big_logo.src = response.data.settingsItemImgProps.image_url + ( '?dt=' + Math.floor(Date.now() / 1000) )

        console.log('document.querySelector("#img_preview_app_big_logo").width::')
        console.log(document.querySelector("#img_preview_app_big_logo").width)
        // I got width/height of new uploaded image - in console I see small values of image

        // But after assigning width/height of preview image
        img_app_big_logo.width= document.querySelector("#img_preview_app_big_logo").width //+ "px"
        img_app_big_logo.height= document.querySelector("#img_preview_app_big_logo").height //+ "px"
        
        // I check and see prior  width/height of PRIOR BIG image - so new uploaded image looks broken
        console.log('img_app_big_logo.width::')
        console.log(img_app_big_logo.width)
        console.log('img_app_big_logo.height::')
        console.log(img_app_big_logo.height)
        ...
    }
}).catch((error) => {
    console.error(error)

});

Why error and how can it be fixed ?

Thanks!

Answer

It sounds like you have image attributes set on the html image element. While you’re updating the image object width and height, you’ll need to do the same with the attributes.

Either way, there are a couple of options here:

1. Reset width/height attributes making use of the image.onload event

You’ll need to remove any image width/height attributes on the img tag as this will affect how the browser renders your new image. You can then set them again after the image.onload event fires.

if (img_app_big_logo) {
    // Set uploaded image path as src
    img_app_big_logo.src = response.data.settingsItemImgProps.image_url + ('?dt=' + Math.floor(Date.now() / 1000))

    // Remove old width/height attributes
    myImage.removeAttribute('width')
    myImage.removeAttribute('height')

    // Update after load event to make sure we have new img data
    img_app_big_logo.onload = () => {
        // Set new width/height attributes
        myImage.setAttribute('width', img_app_big_logo.width)
        myImage.setAttribute('height', img_app_big_logo.height)
    }
}

2. Insert a new img element and remove the old one

Potentially a cleaner solution. Here we create a new img element copying any properties/attributes to it that we might need.

if (img_app_big_logo) {
    // Create a new img element and set src
    var newImg = document.createElement("img");
    newImg.src = response.data.settingsItemImgProps.image_url + ('?dt=' + Math.floor(Date.now() / 1000));

    // Here we might set id, classes etc
    newImg.id = img_app_big_logo.classList
    newImg.classList = img_app_big_logo.classList

    // Now we append the new img to the same container and remove the old one
    img_app_big_logo.parentNode.appendChild(newImg)
    img_app_big_logo.remove()
}

Two options. Hopefully something there is helpful 👍🏼