Currently, I am in the process of developing an angularjs application and I have encountered a minor issue. The problem arises when I populate a list of projects and then apply filtering based on certain conditions. Visually, everything appears fine on the webpage without any apparent issues.
However, upon inspecting the console in Chrome, I noticed the following error when the page loads:
GET http://localhost:8000/app/img/customers/%7B%7Bproject.LogoPath%7D%7D 404 (Not Found) jquery-1.9.1.js:6063
GET http://localhost:8000/app/img/customers/%7B%7Bproject.LogoPath%7D%7D 404 (Not Found) angular-scenario.js:11101
It seems to display the first GET error, then execute the groupBy filter (twice), and finally, the second GET error appears.
The intriguing part is that the webpage displays everything correctly without any missing logos or undefined project errors.
Below is the code snippet responsible for generating the image path:
<article ng-repeat="pm in projects|filter:colorFilter|groupBy:'LeadProjectManagerName'">
<section class="project-section-header">
<h3>{{pm}} <small>{{(projects|filter:pm|filter:{ColorStatus:colorFilter}).length}} projects</small></h3>
</section>
<div class="project project-{{project.ColorStatus}}" ng-class="{'project-last':($index+1) % 4 == 0}" ng-repeat="project in projects|filter:pm|filter:{ColorStatus:colorFilter}">
<img src="img/customers/{{project.LogoPath}}" class="project-logo">
<h1><a href="#/project/{{project.Id}}/dashboard">{{project.Name}}</a></h1>
<p class="project-progress">{{(project.CompletedTasks / project.ScheduledTasks) * 100 || 0}}%</p>
<p class="project-icons"><i class="icon-ok"></i> {{project.CompletedTasks}} <i class="icon-calendar"></i> {{project.ScheduledTasks}} <i class="icon-remove"></i> {{project.MissedTasks}} </p>
</div>
</article>
Despite the error message, all data and logos are being displayed correctly on the page. I am perplexed by the origin of this error and why it displays "project.LogoPath" literally instead of its value.
Any insights or solutions?