在web上显示本地图像文件

Question

我正在开发一个推荐服装的网站。所以，我希望客户把他们的形象，这是在他们的地方。

首先，我尝试了。但不提供自定义选项。我必须用我的照片显示按钮。因此，我尝试了按钮选项，并编写了这样的代码。

null

function openImageFile() {
  var input = document.createElement("input");

  input.type = "file";
  input.accept = "image/*";

  input.click();
  input.onchange = function(event) {
    var input = event.target;
    var reader = new FileReader();
    reader.onload = function() {
      var dataurl = reader.result;
      var output = document.getElementById('output');
      output.src = dataURL;
      output.width = 125;
      output.height = 125;
    };
    photo = input.files[0];
    reader.readAsDataURL(input.files[0]);
  }
}

<button type="button" id="test" onclick="openImageFile()"><img src="blah.png"></button>
<img id='output'>`

null

Answer 1

将图像转换为数据协议。converter:https://base64.guru/converter/encode/image将图像元素的src设置为：

<image src="data:image/png;base64,OUPUT_FROM_ENCODER" />

这允许您的网站加载图像，而不需要URL托管