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

Question

如何将上传的图像插入到 html < img > 标记中？是否可以创建< img > 标记作为上传图像的占位符？我可以选择一个图像与“<输入类型=”文件“名称=”文件到上传“id=”文件到上传“>”，在此之后，我想将该图像发送到img占位符。是否可以在用户关闭网站后从占位符中删除上传的图像？多谢！

Answer 1

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

你必须做什么

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

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

前任：

1-您上传的图像让我们说项目/图像

2-您的图像路径将位于项目/图像/图像中.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);

  })

}