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;

希望可以帮到大家

相关推荐
_志哥_7 分钟前
解除有些网站不能复制的终极办法
前端·chrome
夜幽青玄12 分钟前
mybatis-plus调用报 org.springframework.dao.DataIntegrityViolationException 错误处理
开发语言·python·mybatis
洲覆13 分钟前
Redis 内存淘汰策略
开发语言·数据库·redis·缓存
愚昧之山绝望之谷开悟之坡22 分钟前
什么是uv和传统的区别
前端·chrome·uv
SRC_BLUE_1731 分钟前
NSSCTF - Web | 【第五空间 2021】pklovecloud
android·前端
偶尔贪玩的骑士32 分钟前
Kioptrix Level 1渗透测试
linux·开发语言·网络安全·php
golang学习记32 分钟前
从0死磕全栈之Next.js 数据安全实战指南:从零信任到安全架构
前端
云中雾丽34 分钟前
flutter中 getx 的使用
前端
それども43 分钟前
忽略Lombok构建警告
java·开发语言·jvm
Jay丶1 小时前
聊聊入职新公司两个月,试用期没过这件事
前端·面试