如何将上传的图像插入<IMG>标签/占位符？

Question

如何将上传的图片插入到 html < img > 标签中？ 是否可以创建 < img > 标签作为上传图像的占位符？

我可以选择带有“< input type="file" name="fileToUpload" id="fileToUpload">”的图像，然后我想将该图像发送到 img 占位符。

用户关闭网站后是否可以从占位符中删除上传的图像？

非常感谢！

Answer 1

第一个“src”称为“属性”

你必须做什么

1-在服务器上找到您的图像-> 查看您首先上传文件的位置

2-取文件的路径并将其放在“src”“属性”中

前任：

1-您上传了图片让我们说项目/图片

2-您的图像路径将在 project/images/image.jpg

3-采取这部分，但它在 src 属性内

 src="project/images/image.jpg"

Answer 2

你可以这样试试

<input type="file" id="docpicker" accept="image/*" onChange={updateImageDisplay} multiple></input>
<div class="previewContainer">
   <p>No files currently selected for upload</p>
</div>

const updateImageDisplay = ss => {
  const input = document.querySelector('input');
  const previewContainer = document.querySelector('.previewContainer');
  [...input.files].forEach(file => {
    const image = document.createElement('img');
    image.src = URL.createObjectURL(file);
    previewContainer.appendChild(image);
  })
}

Answer 3

尝试使用画布裁剪图像

const updateImageDisplay = () => {
  const input = document.querySelector('input');
  const previewContainer = document.querySelector('.previewContainer');
  [...input.files].forEach(file => {
      var canvas = document.createElement('canvas');
      var context = canvas.getContext('2d');
      var imageObj = new Image();
      imageObj.onload = function() {
        var sourceX = 150;
        var sourceY = 0;
        var sourceWidth = 150;
        var sourceHeight = 150;
        var destWidth = sourceWidth;
        var destHeight = sourceHeight;
        var destX = canvas.width / 2 - destWidth / 2;
        var destY = canvas.height / 2 - destHeight / 2;

        context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
      };
      imageObj.src = URL.createObjectURL(file);
      previewContainer.appendChild(canvas);
  })
}