Can't append AngularJS array - html

Question

I hope the title isn't too confusing.
I have an array in my angular.js file:
var app = angular.module('resume', []);
app.controller('resumeCtrl', function($scope, $document) {
$scope.projects = [
{
title: 'TRU Colors Brewing Co.',
image: 'images/tcb_screenshot.png',
url: 'https://www.trucolors.co',
category: ['development', 'design']
},
{
title: 'JOMO',
image: 'images/jomo_screenshot.png',
url: 'https://jeffberlin.github.io/JOMO_website/index.html',
category: 'development'
}
];
And in my HTML file I have:
<div class="row portfolio-preview">
<div class="col-lg-4 text-center" ng-repeat="x in projects">
<div class="projects tab-content active">
<figure class="tab-pane">
<a ng-href="{{x.url}}" target="_blank">
<img class="img-fluid screenshot" ng-src="{{x.image}}">
</a>
</figure>
<div class="description">
<a href="" target="_blank">
<h5>{{x.title}}</h5>
</a>
</div>
</div>
</div>
Now my issue is, I get the correct number of boxes to show with the titles, but nothing else displays/shows from the array. For reference, this section will have 3 options in the nav area and filter them out (by the category), assuming that's the best to do it. Can anyone see something I might be doing wrong?
The HTML code shown is the only way I've been able to at least get the titles to show up by using x in projects and the x.image, x.title, etc.
P.S.- I'm very new to Angular, but appreciate you all taking the time to help!

Answer 1

You need to provide a relative path to your images folder. The path needs to be relative to where your html file is so the browser knows where to look properly.
Add ./ in front of your image url.
$scope.projects = [
{
title: 'TRU Colors Brewing Co.',
image: './images/tcb_screenshot.png',
url: 'https://www.trucolors.co',
category: ['development', 'design']
},
{
title: 'JOMO',
image: './images/jomo_screenshot.png',
url: 'https://jeffberlin.github.io/JOMO_website/index.html',
category: 'development'
}
];
and as pointed out in the comments your css might be causing the image to be hidden or not have a width or height. So when debugging don't forget to check the css.