html中如何通过file对象获取图片路径并显示

HTML中通过`<input type="file">`元素可以选择本地文件，包括图片文件。获取图片路径并显示可以通过以下步骤实现：

1. 在HTML中创建一个`<input type="file">`元素：

   <input type="file" id="image-input">

2. 通过JavaScript获取该元素并监听其`change`事件：

   const imageInput = document.getElementById('image-input');
   imageInput.addEventListener('change', handleImageUpload);

3. 在事件处理函数`handleImageUpload`中获取文件对象，并通过`FileReader`对象将文件内容转换为DataURL：

   function handleImageUpload() {
     const file = imageInput.files[0];
     const reader = new FileReader();
     reader.readAsDataURL(file);
     reader.onload = function() {
       const imageUrl = reader.result;
       // 在页面中显示图片
       const imageElement = document.createElement('img');
       imageElement.src = imageUrl;
       document.body.appendChild(imageElement);
     };
   }

上述代码中，`reader.readAsDataURL(file)`将文件内容转换为DataURL，`reader.onload`在转换完成后触发，`reader.result`包含转换后的DataURL。

4. 将DataURL设置为`<img>`元素的`src`属性，即可在页面中显示图片。上述代码中，我们创建了一个`<img>`元素，并将其`src`属性设置为DataURL，然后将该元素添加到页面中。