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;

希望可以帮到大家

相关推荐
我不想当小卡拉米几秒前
C++:继承+菱形虚拟继承的一箭双雕
开发语言·jvm·c++
weixin_457885823 分钟前
JavaScript智能对话机器人——企业知识库自动化
开发语言·javascript·自动化
机器视觉知识推荐、就业指导18 分钟前
QML 批量创建模块 【Repeater】 组件详解
前端·c++·qml
lmryBC4924 分钟前
golang接口-interface
java·前端·golang
孤独得猿25 分钟前
Qt常用控件第一部分
服务器·开发语言·qt
慕斯策划一场流浪30 分钟前
fastGPT—nextjs—mongoose—团队管理之团队列表api接口实现
开发语言·前端·javascript·fastgpt env文件配置·fastgpt团队列表接口实现·fastgpt团队切换api·fastgpt团队切换逻辑
时光呢41 分钟前
JAVA常见的 JVM 参数及其典型默认值
java·开发语言·jvm
橙橙子23043 分钟前
c++柔性数组、友元、类模版
开发语言·c++·柔性数组
程序媛学姐1 小时前
SpringKafka错误处理:重试机制与死信队列
java·开发语言·spring·kafka