今天也要加油ya 2023-08-10 10:38 采纳率: 0%
浏览 18

客户端项目中前端使用img标签怎样显示本地磁盘图片

在客户端项目中，前端展示用户输入的本地图片绝对路径，使用img标签怎样显示本地磁盘图片

  • 写回答

1条回答 默认 最新

  • 崽崽的谷雨 2023-08-10 10:48
    关注

    可以参考一下上传文件的操作 。选择图片后临时生成一个 图片地址 然后显示 。
    比如这样：

    <!DOCTYPE html>
<html>
<head>
  <title>上传图片并预览</title>
  <style>
    #preview {
      max-width: 300px;
      max-height: 300px;
    }
  </style>
</head>
<body>
  <input type="file" id="upload" accept="image/*">
  <div id="preview"></div>
  <script>
    // 获取上传文件的input元素和预览图片的容器
    var uploadInput = document.getElementById('upload');
    var previewContainer = document.getElementById('preview');
    // 监听文件选择事件
    uploadInput.addEventListener('change', function() {
      // 获取选中的文件
      var file = this.files[0];
      // 创建文件读取器
      var reader = new FileReader();
      // 读取文件完成时触发的事件
      reader.onload = function(e) {
        // 创建一个新的图片元素
        var img = document.createElement('img');
        img.src = e.target.result;
        img.style.maxWidth = '100%';
        img.style.maxHeight = '100%';
        // 清空预览容器并添加新的图片元素
        previewContainer.innerHTML = '';
        previewContainer.appendChild(img);
      }
      // 读取文件为Data URL
      reader.readAsDataURL(file);
    });
  </script>
</body>
</html>
    评论

报告相同问题？

问题事件

  • 创建了问题 8月10日