Unable to load image from url fetched from sqlite database

I have a Web app(Electron.Js) using HTML,CSS & Javascript, where in I am saving an image url and background color as chosen by user to Sqlite database using :

 const reader = new FileReader();
      reader.onload = function () {
        const imageUrl = reader.result;
        query =
          "INSERT INTO QuizWindow VALUES('" +
          imageUrl +
          "','" +
          selectedColor +
          "');";
        db.queryStatement(query, (err, rows) => {
          if (err) {
            console.error(err.message);
          } else {
            rows.forEach((row) => {
              console.log(row); 
            });
          }
        });
      };

      reader.readAsDataURL(imageInput.files[0]);

which works fine. But when I fetch the same data from Sqlite using:

function LoadBackground() {
  var query = "SELECT * FROM QuizWindow ;";
  db.queryStatement(query, (err, rows) => {
    if (err) {
      console.error(err.message);
    } else {
      if (rows.length == 0) { //In case of no image found, it loads the default image
        var imageUrl = "assets/images/quizBackGround.jpeg";
        document.body.style.backgroundImage = `url(${imageUrl})`;
        document.body.style.backgroundSize = "cover"; // Set the image size
        document.body.style.backgroundRepeat = "no-repeat";
      } else {
        rows.forEach((row) => {
          var selectedColor = row["BackGroundColor"]; 
          var imageUrl = row["ImagePath"];
          setBodyBackGround(imageUrl, selectedColor);
        });
      }
    }
  });
}

function setBodyBackGround(imageUrl, selectedColor) {
  document.body.style.backgroundColor = `${selectedColor}`;
  document.body.style.backgroundImage = `url(${imageUrl})`;
  document.body.style.backgroundSize = "40% 40%"; // Set the image size
  document.body.style.backgroundRepeat = "no-repeat"; // Prevent repeating
  document.body.style.backgroundPosition = "center center"; // Center the image
}

While the body background color sets perfectly, Image never loads. When printed on console, the url shows. Also when I set the image when read from FileReader :

const imageUrl = reader.result;

it sets perfectly. How can I retrieve data from Sqlite and display the image ? I am storing image as Text in Sqlite.

----Solved it----

The code was perfectly fine, apparently the issue was in

document.body.style.backgroundSize = "40% 40%"; // Set the image size

so amended the function with:

function setBodyBackGround(imageUrl, selectedColor) {
  console.log("download file length " + imageUrl.length);
  document.body.style.backgroundColor = `${selectedColor}`;
  document.body.style.backgroundImage = `url(${imageUrl})`;
  document.body.style.backgroundSize = "50rem 20rem"; // Set the image size
  document.body.style.backgroundRepeat = "no-repeat"; // Prevent repeating
  document.body.style.backgroundPosition = "left 45% top -15%"; // Center the image
}

Via Active questions tagged javascript - Stack Overflow https://ift.tt/tWLqp9V