首页<!DOCTYPE html> <html> <head> <title>图片页面</title> </head> <body> <img src="image.jpg" alt="图片"> </body> </html> 请充当网站开发程序员修改一下代码，点击图片可以选择本地图片，并实时显示

<!DOCTYPE html> <html> <head> <title>图片页面</title> </head> <body> <img src="image.jpg" alt="图片"> </body> </html> 请充当网站开发程序员修改一下代码，点击图片可以选择本地图片，并实时显示

时间: 2023-07-26 12:05:00 浏览: 123

<body>元素及元素属性——-schoolhtml

<body>元素及元素属性——1 <body>元素表明是HTML文档的主体部分。在<body>与</body>之间，通常都会有很多其它元素；这些元素和元素属性构成HTML文档的主体部分。

<!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`属性，即可实现图片的实时预览效果。

阅读全文