直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
// HTML部分
<input type="file" id="fileInput">
<button onclick="showImage()">显示图片</button>
<div id="imageContainer"></div>
<script>
function showImage() {
var fileInput = document.getElementById('fileInput');
var imageContainer = document.getElementById('imageContainer');
var file = fileInput.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var img = document.createElement('img');
img.src = e.target.result;
imageContainer.innerHTML = '';
imageContainer.appendChild(img);
};
reader.readAsDataURL(file);
}
</script>
</body>
</html>
效果图：
第二种方法：
// 定义上传图片的URL
let urls = "http://jingxun.zhbbll.asia/";
//图片路径
icon = shopdata[i].icon;
//回显图片
document.querySelector('.image img').src = urls+icon;
希望可以帮到大家