，我們要創建一個<div>元素，并在其中插入一張圖片。以下是一個簡單的示例：
<div> <img src="images/example.jpg" alt="示例圖片"> </div>
在以上代碼中，我們用<div>標簽創建了一個包含圖片的容器。在<img>標簽中，我們使用了src屬性指定了圖片的路徑，alt屬性則用于添加一段文字描述，當圖片無法顯示時會展示這段文字。其中，images/example.jpg是示例圖片的路徑，示例圖片是在項目文件夾中的images文件夾下。這樣，當瀏覽器加載頁面時，圖片將會顯示在<div>容器中。
接下來，我們可以進一步自定義<div>中的<img>元素的樣式。以下是一個具有自定義樣式的示例：
<style>
.image-container {
width: 300px;
height: 200px;
border: 1px solid gray;
padding: 10px;
margin: 10px;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
<div class="image-container">
<img src="images/example.jpg" alt="示例圖片">
</div>在以上代碼中，我們使用<style>標簽定義了一段CSS樣式。.image-container是一個自定義類名，用于給<div>元素定義樣式。在.image-container中，我們設置了寬度為300像素、高度為200像素的容器，并添加了1像素寬度的灰色邊框、10像素的內邊距和外邊距。接著，我們使用.image-container img選擇器選擇了<div>中的<img>元素，并設置了圖片的寬度和高度都為100%，以及使用object-fit屬性實現了圖片的裁剪和填充方式為覆蓋容器。最后，我們將<div>容器的類名設置為image-container，并將<img>元素放入其中。這樣，圖片將根據指定的樣式顯示在容器中。
除了使用<img>元素直接在<div>中插入圖片外，我們還可以通過JavaScript來動態創建<img>元素并加入到<div>中。以下是一個使用JavaScript插入圖片的示例：
<div id="image-container"></div>
<script>
var image = document.createElement('img');
image.src = 'images/example.jpg';
image.alt = '示例圖片';
document.getElementById('image-container').appendChild(image);
</script>在以上代碼中，我們創建了一個空的<div>元素，并為其設置了一個唯一的id，即image-container。接著，我們使用JavaScript中的document.createElement('img')方法創建了一個<img>元素，并使用image.src屬性指定了圖片的路徑，image.alt屬性添加圖片的描述。通過document.getElementById('image-container')方法獲取到了剛創建的<div>元素，然后使用.appendChild()方法將<img>元素添加到<div>中。這樣，在頁面加載時，JavaScript將會動態創建<img>元素并插入到<div>中，實現插入圖片的效果。
綜上所述，通過在<div>元素中插入<img>元素，我們可以創建并展示圖片。我們可以通過簡單的HTML代碼、自定義樣式和JavaScript動態插入等方式實現在<div>中構建<img>的功能。這為我們在網頁中展示和處理圖片提供了便捷的途徑。