How to render dynamic images with angular

Question

I have an object in the following format:

Inside the main object has an object called upload. This object contains information about the images to be rendered.

I’m trying to do it like this:

ng-src="{{o.way}}{{o.original_filename}}"

But it doesn’t work at all. Returns the message :

Error: [$Interpolate:noconcat] Error while interpolating: {{o. way}}/{{o. original_filename}} Strict Contextual Escaping disallows interpolations that concatenate Multiple Expressions when a Trusted value is required.

I found something on the $sce ms n helped me mt.

I’m using an angle library to make a slide.

<slidecontainer ng-repeat="o in dataProject.upload.data">
    <slide ng-src="{{o.way}}/{{o.original_filename}}"></slide>
</slidecontainer>

Answer 1

Instead of trying to concatenate the two values into html, create a method in the controller that concatenates the values:

$scope.getProjectUploadUrl = function (project) {
  return project.way + project.original_filename;
};

...so in html you call this method that way:

<slidecontainer ng-repeat="o in dataProject.upload.data">
    <slide ng-src="{{getProjectUploadUrl(o)}}"></slide>
</slidecontainer>

---

Apparently this directive does not allow you to specify more than one expression, as can be seen at that link.