js 通过路径读取本地图片并显示

在JavaScript中，我们可以通过File API来读取本地文件。要读取本地图片并显示，我们可以使用以下步骤：

1. 首先，我们需要一个HTML页面，其中包含一个input元素，允许用户选择本地图片文件。例如：

<input type="file" id="fileInput">
<img id="imagePreview">

2. 接下来，我们需要编写JavaScript代码来处理用户选择的文件。首先，我们需要监听文件选择事件，当用户选择文件后触发。在事件处理程序中，我们可以获取用户选择的文件，并读取该文件的内容。代码如下：

const fileInput = document.getElementById('fileInput');
const imagePreview = document.getElementById('imagePreview');

fileInput.addEventListener('change', function(e) {
  const file = e.target.files[0];
  const reader = new FileReader();

  reader.onload = function(e) {
    imagePreview.src = e.target.result;
  }

  reader.readAsDataURL(file);
});

3. 在上述代码中，我们首先获取了input元素和img元素的引用，然后添加了一个监听器来监听文件选择事件。当用户选择文件后，change事件会被触发。在事件处理程序中，我们首先获取用户选择的文件，然后创建一个FileReader对象。然后，我们定义了一个onload事件处理程序，该处理程序在文件读取完成后执行。在事件处理程序中，我们通过调用`readAsDataURL`方法来读取文件的内容。最后，我们将读取到的内容设置为img元素的src属性，从而显示图片在页面上。

通过以上步骤，我们可以通过路径读取本地图片并显示在页面上。请注意，由于浏览器的安全性限制，在某些情况下，可能无法直接从本地文件系统访问文件，请确保在使用该功能时，遵循浏览器的安全策略。