Here is the code snippet I am currently working on:
<body lang="en-US" ng-app="socket-server" ng-controller="imageValidationController">
<div class="image-panel">
<h1>Images Found:</h1>
<div class="image-list" ng-repeat="image in images">
<p>Image size: {{image.size}}</p>
<p>Width: {{image.width}}</p>
<p>Height: {{image.height}}</p>
<img class="image" ng-src="{{image.image}}">
</div>
<p>Total images found: {{num_images}}</p>
</div>
In addition to the HTML above, here is the accompanying Javascript:
var app = angular.module('socket-server', []);
app.controller('imageValidationController', function($scope, $http) {
$http({
method: 'POST',
data: 'html=<html><body><img src="https://media.giphy.com/media/lhvyCCcFuQFKo/200.gif"></body>',
url: '/app/image-validation',
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
.then(function(response) {
$scope.images = response.data.images;
$scope.num_images = response.data.num_images;
})
})
The endpoint /app/image-validation returns a JSON object structured as follows:
{
images: [
{
image: 'http://someurl.com/image.jpg',
size: 471812,
width: 640,
height: 480
}
]
}
Despite checking and confirming that everything is functioning correctly, I am encountering an issue. The image tag is being generated with the correct source, but the actual image does not load. I'm uncertain where my mistake lies in this scenario.