前端 img标签显示本地任意文件夹图片

在前端页面中，使用`<img>`标签可以显示网络上的图片，但是无法直接显示本地任意文件夹中的图片。这是为了保证用户的安全性，防止恶意网站读取本地文件。

如果你想要在页面中显示本地图片，有两种方法：

1. 将图片上传到服务器，然后通过URL地址引用图片。

2. 使用`FileReader`对象读取本地图片，将图片数据转化为base64编码格式，然后通过`<img>`标签的`src`属性显示图片。

以下是第二种方法的示例代码：

<input type="file" onchange="previewImage(this)">
<img id="preview">

<script>
function previewImage(file) {
  var reader = new FileReader();
  reader.onload = function() {
    var img = document.getElementById("preview");
    img.src = reader.result;
  }
  reader.readAsDataURL(file.files[0]);
}
</script>

这段代码会显示一个文件选择框，用户选择本地图片后，会通过`FileReader`对象读取文件数据，并将数据转化为base64编码格式，最后通过`<img>`标签的`src`属性显示图片。

相关问题

前端 显示本地任意文件夹图片

请注意，为了保证用户的安全性和隐私，前端网页不能直接访问本地计算机的文件系统。因此，直接在前端页面中显示本地任意文件夹图片是不可行的，除非用户手动选择要显示的文件。

以下是一个使用`<input>`标签实现选择本地文件并显示图片的示例代码：

<input type="file" onchange="showImage(this)">
<img id="image-preview">

<script>
function showImage(fileInput) {
  var file = fileInput.files[0];
  var reader = new FileReader();
  reader.onload = function() {
    var imagePreview = document.getElementById("image-preview");
    imagePreview.src = reader.result;
  }
  reader.readAsDataURL(file);
}
</script>

这段代码会在页面上显示一个文件选择框，用户选择本地图片后，会通过`FileReader`对象读取文件数据，并将数据转化为base64编码格式，最后通过`<img>`标签的`src`属性显示图片。但是请注意，这种方式只能显示用户选择的图片，无法直接访问本地文件夹中的其他图片。