JavaScript是现代网页开发中不可或缺的重要语言之一。在网页中，经常需要引入图片，而在JavaScript中可以使用Img对象来实现对图片的操作。本文将介绍如何创建Img对象，以及如何在网页中插入图片。

首先，我们来看一个简单的例子：

var myImage = new Image();
myImage.src = 'path/to/image.jpg';
document.body.appendChild(myImage);

上面的代码就创建了一个Img对象，并将其插入到网页的

标签中。其中，new Image()表示创建一个Img对象，而myImage是一个变量名，用来表示当前创建的Img对象。接下来，我们可以使用src属性来设置Img对象的图片路径。最后，使用appendChild()方法将Img对象插入到标签中，这样就可以在网页中看到该图片了。

除了使用src属性来设置图片路径外，我们还可以使用data属性来直接在代码中插入图片：

var myImage = new Image();
myImage.data = 'data:image/png;base64,iVBORw0KG...';
document.body.appendChild(myImage);

上面的代码中，我们直接将一张png格式的图片以Base64编码的形式插入到Img对象中。在实际开发中，这种方法在处理小图片时会比较方便，但是对于大图片来说，由于需要将其转换为Base64编码的形式，可能会导致网页加载速度变慢。

除了设置图片路径之外，我们还可以对Img对象进行其他的操作。比如，我们可以通过width和height属性来设置图片的宽度和高度：

var myImage = new Image();
myImage.src = 'path/to/image.jpg';
myImage.width = 300;
myImage.height = 200;
document.body.appendChild(myImage);

上面的代码中，我们将Img对象的宽度设置为300，高度设置为200。这样，在网页中显示的图片就会按照这个尺寸来显示。

另外，我们还可以通过onload事件来判断图片是否加载完成：

var myImage = new Image();
myImage.src = 'path/to/image.jpg';
myImage.onload = function() {
alert('图片加载完成！');
};
document.body.appendChild(myImage);

上面的代码中，我们使用onload事件来监测图片是否加载完成。当图片加载完成之后，就会弹出一个对话框提示用户图片已经加载完成。

最后，我们来看一个实际应用的例子。下面的代码中，我们创建了一个函数createImg，用来创建Img对象并将其插入到网页中。在网页中，我们可以通过点击按钮来动态创建Img对象并显示对应的图片：

<button onclick="createImg('path/to/image1.jpg')">显示图片1</button>
<button onclick="createImg('path/to/image2.jpg')">显示图片2</button>
<div id="myImageContainer"></div>

上面的代码中，我们使用了两个按钮来分别显示不同的图片。在点击按钮的时候，会调用createImg函数并传入对应的图片路径。在函数中，我们首先创建了Img对象并设置img对象的src属性，然后在onload事件中将其插入到id为myImageContainer的