AngularJS div image是指使用AngularJS框架來操作和顯示圖像的方法。通過在<div>元素中插入圖像，可以使用AngularJS來動態更改圖像的屬性，并根據不同的條件顯示不同的圖像。下面將通過幾個代碼案例來詳細解釋說明。

，我們需要在HTML頁面中引入AngularJS庫文件：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>

接下來，我們可以創建一個AngularJS應用程序，并在其中使用<div>元素顯示圖像。下面的代碼演示了如何將AngularJS應用程序與<div>元素和圖像綁定：

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.imageURL = 'image.jpg';
});
</script>
<br>
<div ng-app="myApp" ng-controller="myCtrl">
<img ng-src="{{imageURL}}" alt="My Image">
</div>

在以上的代碼中，我們創建了一個AngularJS應用程序，并使用控制器定義了一個$scope變量，名稱為imageURL。該變量指定了圖像的URL地址。然后，在<div>元素中使用了ng-src指令來設置圖像的源屬性。通過使用{{imageURL}}的插值表達式，我們可以動態更改圖像的URL地址。

接下來，我們可以使用條件語句來根據不同的條件顯示不同的圖像。下面的代碼演示了如何使用AngularJS的條件語句來切換圖像：

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.imageURL = 'image1.jpg';
$scope.showImage = true;
$scope.toggleImage = function() {
$scope.showImage = !$scope.showImage;
if($scope.showImage) {
$scope.imageURL = 'image1.jpg';
} else {
$scope.imageURL = 'image2.jpg';
}
}
});
</script>
<br>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="toggleImage()">Toggle Image</button>
<div ng-if="showImage">
<img ng-src="{{imageURL}}" alt="My Image">
</div>
</div>

在以上的代碼中，我們創建了一個新的$scope變量，名稱為showImage。該變量用于控制圖像的顯示與隱藏。我們還定義了一個toggleImage函數，該函數會在點擊按鈕時觸發，并根據showImage的值來切換圖像。通過使用ng-if指令，我們可以根據showImage的值來決定是否顯示<div>元素和圖像。

通過以上的示例，我們可以看到如何使用AngularJS來操作并顯示圖像。通過在<div>元素中插入圖像，并結合使用AngularJS的指令和表達式，我們可以實現動態更改圖像的屬性，并根據不同的條件顯示不同的圖像。