如何將上傳的圖像插入<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);
  })
}