上传图片无法显示：我的HTML图片上传代码为何失效？

你的代码里有三个关键问题导致图片无法正常显示：

• 事件绑定错误
  inputFile.onchange= myFunction()这种写法会立刻执行myFunction，而不是在用户选择文件后触发。正确的做法是直接赋值函数引用，去掉括号：

  inputFile.onchange = myFunction;
  

• 文件对象获取错误
  上传控件的文件列表存储在files属性（复数形式）里，不是file。要获取第一个选中的文件，应该写成：

  inputFile.files[0]
  

• 图片初始状态隐藏
  图片元素默认设置了display:none，就算修改了图片地址，页面上也看不到。要么移除这个样式，要么在选中文件后把图片设为可见：

  foodImage.style.display = "block";
  

修正后的完整代码 #

<!-- Title -->         
<h2 id="cyor-h2">Create your own Recipe</h2>      
<img id="food-image" class="square-recipe-img" style="display:none;" src="no-image.jpg">
<button id="cyor-button" onclick="createButton()">Begin</button> 
    
<!-- Select Image --> 
<button><label for="image_input">Update Image</label></button>
<input style="display:none;" type="file" accept="image/png, image/jpeg, image/jpg, image/webp" id="image_input">

<script>
let foodImage = document.getElementById("food-image");
let inputFile = document.getElementById("image_input");

// 修正事件绑定
inputFile.onchange = myFunction;

function myFunction() {
    // 修正文件获取方式，并显示图片
    foodImage.src = URL.createObjectURL(inputFile.files[0]);
    foodImage.style.display = "block";
}
</script>

内容的提问来源于stack exchange，提问作者Meghan M