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

Question

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

我可以选择带有“”的图像，然后我想将该图像发送到 img 占位符。

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

非常感谢！

Answer 1

尝试使用画布裁剪图像

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);
  })
}

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

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

你必须做什么

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

2-取文件的路径，放到“src”“属性”里面

例如：

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

2-你的图片路径将在 project/images/image.jpg

3-把这部分放在src属性里面

 src="project/images/image.jpg"