Can't load local jpg files in my angularjs project

Question

I have started a small angularjs app project using yeoman's generator-angular.

When adding jpg files to the app/images folder, and try to use an tag linking to one of these jpg files, they don't show up in the browser.

When using png files everything it ok (Using same absolute path /images/image.png and /images/image.jpg). If I use a remote URL to a jpg file everything works fine.

What am I missing here? I have the same problem using the tag. When using a local absolute path, it doesn't work and when I use a remote url everything is fine.

Many thanks for your time and help.

Answer 1

Are you using html5Mode? If so and if you are using connect-modrewrite to rewrite urls to index.html, make sure you have excluded jpg and jpeg files. I recently encountered the same issue and didn't realize my rewrite rule was excluding png images but not jpeg.

Answer 2

You need to use an angular expression {{}} for ng-src to work.

For example, using this html markup:

<div ng-controller="MyCtrl">
  <img ng-src="{{ path }}" />
</div>

with a controller like:

function MyCtrl($scope) {
    $scope.path = 'https://si0.twimg.com/profile_images/';
};

will allow angular to load, do its magic, and then correctly reference the image source from the path variable held in $scope from the controller.

Else, the image trys to load from the src attribute hasn't had time to get a value yet.

Demo in a plunker: http://plnkr.co/edit/6jMDp96we0S7DGyGTtxw?p=preview