Replace image on Mobile browser

Hi all I have a function that replaces the image background on my div, it works as intended on a web browser bot Firefox and Chrome on my computer, but when I browse it on a mobile phone, it does ask for permission to allow camera or picture from gallery and I can choose one, but it simply does not work on the phone any advice? thanks in advance.

backgroundimg = document.getElementById('div').style.backgroundImage="url('callofduty.jpg')";



const frame = document.getElementById('div');
const file = document.getElementById('file');
const reader = new FileReader();
reader.addEventListener("load", function () {
  frame.style.backgroundImage = `url(${ reader.result })`;
}, false);
file.addEventListener('change',function() {
  const image = this.files[0];
  if(image) reader.readAsDataURL(image);
}, false)