Menu
I'm trying to add an image to a sample web page. But whenever I use ng-src in img tag, the image is not showing on the page (the image is visible if I use 'src' in place of 'ng-src'). Here is my Html and JavaScript file.
Javascript & HTML :
/**
* Module
*
* Description
*/
angular.module('myModule', [])
.controller('myCtrl', ['$scope', function($scope){
$scope.clicked = "";
$scope.clickMe = function() {
$scope.clicked= "Image Clicked";
};
}]);
<html ng-app="mainModule">
<head>
<title>Testing For Image Click</title>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="angular.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"/>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
</head>
<body class="container" ng-controller="myCtrl">
<div>
<img ng-src="bluegem.jpg" ng-click="clickMe()"/>
</div>
</body>
Thanks in advance.
460
asked Dec 04 '25 07:12
There are 2-3 problems in this code
1. myModule and mainModule(your app.js is creating a module named myModule but in your html you are using mainModule)
2. order of mentioned files (angular.js should be mentioned before app.js
Here I am adding the code
<html ng-app="myModule">
<head>
<title>Testing For Image Click</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"/>
Latest compiled and minified JavaScript
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> -->
</head>
<body class="container" ng-controller="myCtrl">
<div>
<img ng-src="{{image}}" ng-click="clickMe()"/>
</div>
</body>
And
angular.module('myModule', [])
.controller('myCtrl', ['$scope', function($scope){
$scope.clicked="";
$scope.image = "bluegem.jpg"
$scope.clickMe=function()
{
$scope.clicked="Image Clicked";
};
}]);
Change the markup so that the ng-src binds to a variable and not a URL as you had it setup before:
<img ng-src="{{imageURL}}" ng-click="clickMe()"/>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With