js图片回显的方法

直接上代码:

复制代码
<!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;

希望可以帮到大家

相关推荐
云泽8084 分钟前
函数模板与类模板:C++泛型编程核心解析
java·开发语言·c++
昔人'1 小时前
`list-style-type: decimal-leading-zero;`在有序列表`<ol></ol>` 中将零添加到一位数前面
前端·javascript·html
应用市场6 小时前
构建自定义命令行工具 - 打造专属指令体
开发语言·windows·python
岁月宁静6 小时前
深度定制:在 Vue 3.5 应用中集成流式 AI 写作助手的实践
前端·vue.js·人工智能
Dfreedom.6 小时前
一文掌握Python四大核心数据结构:变量、结构体、类与枚举
开发语言·数据结构·python·变量·数据类型
一半烟火以谋生6 小时前
Python + Pytest + Allure 自动化测试报告教程
开发语言·python·pytest
虚行6 小时前
C#上位机工程师技能清单文档
开发语言·c#
小羊在睡觉7 小时前
golang定时器
开发语言·后端·golang
心易行者7 小时前
10天!前端用coze,后端用Trae IDE+Claude Code从0开始构建到平台上线
前端
CoderCodingNo7 小时前
【GESP】C++四级真题 luogu-B4068 [GESP202412 四级] Recamán
开发语言·c++·算法