Skip to content

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 :'/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 = + ( '?dt=' + Math.floor( / 1000) )

        // 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
}).catch((error) => {


Why error and how can it be fixed ?




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 = + ('?dt=' + Math.floor( / 1000))

    // Remove old width/height attributes

    // 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 = + ('?dt=' + Math.floor( / 1000));

    // Here we might set id, classes etc = 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

Two options. Hopefully something there is helpful 👍🏼