0

I am trying to implement image upload to a project but Chrome inspector says that the file cannot be found. The HTML seems okay. Not too sure about the CSS and Javascript. Is this some sort of security measure/firewall issue? I'm using a Mac if that helps.

const image_input = document.querySelector("#image_input");
var uploaded_image = "";

image_input.addEventListener("change", function() {
  const reader = new FileReader();
  reader.addEventListener("load", () => {
    uploaded_image = reader.result;
    document.querySelector("#display_image").style.backgroundImage = 'url(${uploaded_image})'
  });
  reader.readAsDataURL(this.files[0]);
})
body {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-direction: column;
  height: 100vh;
}

#display_image {
  width: 375px;
  height: 211px;
  border: 1px solid black;
  background-position: center;
  background-size: cover;
}
<input type="file" id="image_input" accepts="image/png, image/jpg">
<div id="display_image"></div>
DBS
  • 8,027
  • 4
  • 34
  • 50
John
  • 21
  • 3
  • 1
    You have a typo/syntax error. You are using the syntax to insert a variable into a template sting, but not actually using a template string. Your `'url(${uploaded_image})'` needs to be `\`url(${uploaded_image})\`` (Note the `\`` quotes) – DBS May 23 '22 at 14:58

0 Answers0