读取图片并显示js代码
时间: 2023-08-30 14:01:31 浏览: 60
要读取图片并显示,可以使用JavaScript编写以下代码:
首先,需要在HTML中创建一个img标签,用于显示图片。然后,使用JavaScript获取该img标签的引用。
```html
<!DOCTYPE html>
<html>
<head>
<title>读取图片并显示</title>
</head>
<body>
<img id="myImage" src="" />
<script>
var img = document.getElementById("myImage");
// 读取图片文件
var reader = new FileReader();
reader.onload = function(e) {
img.src = e.target.result; // 设置图片源路径为读取结果
};
reader.readAsDataURL("path/to/image.jpg"); // 替换为图片的路径
// 或者,可以直接设置图片源路径
// img.src = "path/to/image.jpg"; // 替换为图片的路径
</script>
</body>
</html>
```
上述代码中,我们可以通过`document.getElementById("myImage")`获取到id为"myImage"的img元素,然后使用FileReader对象来读取图片文件。
在`reader.onload`事件处理程序中,`e.target`表示已加载的文件,`e.target.result`是图像的Base64编码字符串。将这个编码字符串分配给img的src属性,就可以显示图片了。
如果不想使用FileReader对象,也可以直接设置img的src属性为图片的路径,如`img.src = "path/to/image.jpg";`。注意,需要将路径替换为实际的图片路径。
这样,当打开页面时,图片将被加载并显示在img标签中。