Question

我正在使用HTML中的输入标签捕获图像，然后将捕获的图像存储在React中的状态变量中，然后使用存储在State变量中的图像数据显示该图像，如下所示：-

<input
     type="file"
     accept="image/*"
     capture
     id="telephoneBill"
     ref="telephoneBill"
     style={inputCameraLabel}
     onChange={this.loadFile("telephoneBill", "telephoneBillPhoto")}
 />

和loadfile函数是：-

loadFile = (imageId: string, photostate: any) => {
    return (event: any) => {
      var reader = new FileReader();
      reader.onload = function() {
        //output: HTMLImageElement;
        var output: any;
        output = document.getElementById(imageId);
        output.src = reader.result;
      };
      reader.readAsDataURL(event.target.files[0]);
      // Below lines are used to store the image in state vairable
      var obj = {};
      obj[photostate] = event.target.files[0];
      this.setState(obj);
    };
  };

但是使用这种技术，我将所有图像数据存储在消耗我的主内存的状态变量中。 1.是否有任何方法可以将图像存储在辅助存储器中，并且我仅将该图像的引用存储在状态变量中。 2.我们将如何使用HTML中的Image标签显示捕获的图像，即在Image Tag的src部分中写什么。

如何使用状态变量引用图像

0 个答案: