<!DOCTYPE html> <html> <head> <title>图片页面</title> </head> <body> <img src="image.jpg" alt="图片"> </body> </html> 请充当网站开发程序员修改一下代码,点击图片可以选择本地图片,并实时显示
时间: 2023-07-26 16:05:00 浏览: 131
<!DOCTYPE html>
<html>
<head>
<title>图片页面</title>
<style>
#image-preview {
display: none;
max-width: 500px;
max-height: 500px;
}
</style>
<script>
function previewImage(event) {
var reader = new FileReader();
reader.onload = function() {
var img = document.getElementById('image-preview');
img.src = reader.result;
img.style.display = 'block';
};
reader.readAsDataURL(event.target.files[0]);
}
</script>
</head>
<body>
<input type="file" accept="image/*" onchange="previewImage(event)">
<img id="image-preview" alt="图片预览">
</body>
</html>
以上是修改后的代码,现在点击图片可以选择本地图片,并实时显示在页面上。修改后的代码中添加了一个`input`标签,用于选择本地图片文件。当选择文件后,通过`FileReader`对象将文件内容转换为Base64编码的字符串,然后将这个字符串赋值给`img`标签的`src`属性,即可实现图片的实时预览效果。
阅读全文