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

Question

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

我可以选择一个图像与“<输入类型=”文件“名称=”文件到上传“id=”文件到上传“>”，在此之后，我想将该图像发送到img占位符。

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

多谢！

Answer 1

第一个“src”称为“属性”你必须做什么1-在服务器上找到您的图像 - >查看您首先将文件上传到的位置2-获取文件的路径并将其放在“src”“属性”中前任：1-您上传的图像让我们说项目/图像2-您的图像路径将位于项目/图像/图像中.jpg3-采取这部分和但它在 src 属性里面&nbsp;src="project/images/image.jpg"

Answer 2

你可以像这样尝试<input type="file" id="docpicker" accept="image/*" onChange={updateImageDisplay} multiple></input><div class="previewContainer">&nbsp; &nbsp;<p>No files currently selected for upload</p></div>const updateImageDisplay = ss => {&nbsp; const input = document.querySelector('input');&nbsp; const previewContainer = document.querySelector('.previewContainer');&nbsp; [...input.files].forEach(file => {&nbsp; &nbsp; const image = document.createElement('img');&nbsp; &nbsp; image.src = URL.createObjectURL(file);&nbsp; &nbsp; previewContainer.appendChild(image);&nbsp; })}

Answer 3

尝试使用画布裁剪图像const updateImageDisplay = () => {&nbsp; const input = document.querySelector('input');&nbsp; const previewContainer = document.querySelector('.previewContainer');&nbsp; [...input.files].forEach(file => {&nbsp; &nbsp; &nbsp; var canvas = document.createElement('canvas');&nbsp; &nbsp; &nbsp; var context = canvas.getContext('2d');&nbsp; &nbsp; &nbsp; var imageObj = new Image();&nbsp; &nbsp; &nbsp; imageObj.onload = function() {&nbsp; &nbsp; &nbsp; &nbsp; var sourceX = 150;&nbsp; &nbsp; &nbsp; &nbsp; var sourceY = 0;&nbsp; &nbsp; &nbsp; &nbsp; var sourceWidth = 150;&nbsp; &nbsp; &nbsp; &nbsp; var sourceHeight = 150;&nbsp; &nbsp; &nbsp; &nbsp; var destWidth = sourceWidth;&nbsp; &nbsp; &nbsp; &nbsp; var destHeight = sourceHeight;&nbsp; &nbsp; &nbsp; &nbsp; var destX = canvas.width / 2 - destWidth / 2;&nbsp; &nbsp; &nbsp; &nbsp; var destY = canvas.height / 2 - destHeight / 2;&nbsp; &nbsp; &nbsp; &nbsp; context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);&nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; imageObj.src = URL.createObjectURL(file);&nbsp; &nbsp; &nbsp; previewContainer.appendChild(canvas);&nbsp; })}