We Keep Coding

Img src for svg file doesn't work if property binding is used in angular 8

I have an array in my component
this.myArray = [
{
img: '/path/to/myImage.svg',
title: 'My Image'
}
]
Which I am using in the template to render a list
<div *ngFor="let item of myArray">
<img src="/path/to/myImage.svg"> --> This works
<img [src]="item.img"> --> this gives error 404
<div>
I am able to show the svg if I directly provide the url, however, property binding throws 404 error, What am I missing here?
P.S my angular project doesn't include angular-cli/angular.json

I think if you are receiving data asynchronous then your binding should be work.
When the value is received, AsyncPipe signals the component to check for changes.
https://angular.io/api/common/AsyncPipe
images$: Observable<Image[]> = this.imageService.getImage();
<div *ngFor="let image of images$ | async">
<img [src]="image.src"/>
<div>

In Angular, String interpolation is used to display dynamic data on HTML template (at user end). It facilitates you to make changes on component.ts file and fetch data from there to HTML template (component.html file).
<div *ngFor="let item of myArray">
<img src="{{item.img}}">
<div>

This should work
<ng-container *ngIf="myArray">
<div *ngFor="let item of myArray">
<img src="/path/to/myImage.svg"> --> This works
<img [attr.src]="item.img"> --> this should work
<div>
</ng-container>

website gets slow when huge amount of data is being loaded

I have a internal team website build using python django and angularJS. The website works fine when there is low data/ content on it.
When the website gets scrolled and more data is loaded. It becomes slow.
The major problem occurs when we try to open any modal or try to write text in the textarea. The text lags while writing and modal open very slowly.
I have used nested ng-repeat there are 5 nested ng-repeat.
<div ng-repeat="x in xyz">
<div ng-repeat="y in xyz">
</div>
<div ng-repeat="img in xyz">
</div>
<div ng-repeat="y in xyz">
<div ng-repeat="z in xyz">
</div>
</div>
</div>
Above is the example of the structure being used in the website.
The above snippet repeat itself around 100 times thorughout the page.
These are having images, forms, text, input , user tagging like facebook.
ngCacheBuster,ui.bootstrap, ngTagsInput, ui.mention,monospaced.elastic these are the external library being used in the website.
the website is built using bootstrap.
Is there a specific reason why the website becomes heavy.
each size of the image is around 100kb on an average.

really? the page loads slow when there is alot of data? :D
anyway the most simple method to speed-up heavy data apps is to conditionally load and render parts of it, for example:
<div ng-repeat="x in bla" ng-click="showL1 = true">
<div ng-repeat="y in boo" ng-if="showL1 === true">
//more...
</div>
</div>
on the other part is double check your architecture, since there is a very limited amount of data a person can take from a page and therefor start thinking about tabs and paging

Maybe u need use some function in your controller that will load some part of all data for user.
For example:
app.constant('range' , 10);
app.controller('example', ['$scope', function($scope) {
$scope.loadRangeData = function(range) {
//your way of loading data with using range
}
}
]);
and after u can use ng-repeat as
<div ng-repeat="x in loadRangeData">
but best way it's finding answer in your django maybe

ng-show not working properly on initial page load

So I was working on a webpage using html, css and Angular.js and I wanted to display the page based on what the user has selected on the dropdown list. The "filter" when the user selects his/her choice works perfectly but initially when the page is loaded I could not get the entire page content to be displayed, instead it displays a blank page.
This is a snippet of my code:
<select ng-model="selectedOption" ng-options="data.id as data.name for data in myData.categories"></select>
<div class="main" >
<ul id="cbp-ntaccordion" class="cbp-ntaccordion" ng-repeat="data in myData.profiles" ng-show="selectedOption == data.category" >
<li class="cbp-ntopen">
<h3 class="cbp-nttrigger">{{data.name}}</h3>
<div class="cbp-ntcontent">
I'm getting an error like:
angular.js:13708Error: [ngRepeat:dupes] errors.angularjs.org/1.5.7/ngRepeat/dupes?

You may use ng-value="defalutvalue" so your code is something like that
<select ng-model="selectedOption" ng-value="defalutvalue" ng-options="data.id as data.name for data in myData.categories"></select>
<div class="main" >
<ul id="cbp-ntaccordion" class="cbp-ntaccordion" ng-repeat="data in myData.profiles" ng-show="selectedOption == data.category" >
<li class="cbp-ntopen">
<h3 class="cbp-nttrigger">{{data.name}}</h3>
<div class="cbp-ntcontent">

From the error that you mentioned, I think you are not giving Angular a way to figure out how to note your object as unique. Use a track by expression in your ng-repeat.
So your ng-repeat would become: ng-repeat="data in myData.profiles track by $index"
See the Tracking and Duplicates section of ngRepeat documentation.
<ul id="cbp-ntaccordion" class="cbp-ntaccordion" ng-repeat="data in myData.profiles track by $index" ng-show="selectedOption == data.category">

Dependency injection into HTML img src tag within an ng-repeat loop not working

I have a strange issue with my a value not properly working. Basically I have a big array of id's that correspond to images on a server.
Images: {
"Set1" : {
'Blue':['8277','8278','8279','8280','8281','8282','8283'],
'Green':['8284','8285'],
'Red':['8286','8287','8288','8289']
}
}
Within my controller model I have an ng-repeat that looks something like this.
<div ng-controller="myCtl">
<div ng-repeat="(key, value) in cities">
<p>
<img src="http://wesbite.api.com/{{value[0]}}/half?system=xxxxml&pubtoken=hfdshfgsjkhgkhfkjghkdshgjkshfhdffhksfhgdfhgdskhsgkf4658cee&refreshRate=2000">
</p>
</div>
</div>
My issue that it will not actually resolve the img onto the page. If I pull in imgs any other way it works fine.
Is this a problem with mixing HTML and within an ng-repeat loop?

use ng-src in place of just src
<img ng-src="http://wesbite.api.com/{{value[0]}}/half?system=xxxxml&pubtoken=hfdshfgsjkhgkhfkjghkdshgjkshfhdffhksfhgdfhgdskhsgkf4658cee&refreshRate=2000">

Using Angular markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrc directive solves this problem.
Documents : https://docs.angularjs.org/api/ng/directive/ngSrc
<div ng-controller="myCtl">
<div ng-repeat="(key, value) in cities">
<p> <img ng-src="http://wesbite.api.com/{{value[0]}}/half?system=xxxxml&pubtoken=hfdshfgsjkhgkhfkjghkdshgjkshfhdffhksfhgdfhgdskhsgkf4658cee&refreshRate=2000"></p>
</div>
</div>

Initiating same angularjs app in two places

I have a html template that is being used for multiple projects. In that template I have two places where I can set the content.
The layout is something similar to this:
<body>
<div>Navbar from TEMPLATE</div>
<div>
<div>other TEMPLATE stuff</div>
<div id="content1">CONTENT can be set here</div>
</div>
<div id="content2">CONTENT can also be set here</div>
</body>
My question is is it possible to use the same angular app in both #content1 and #content2? Can the ng-app="main" be used twice?
If something like this isn't possible to do I can add an ng-app attribute to the template but would rather not have to do this as, as I said, the template is used for multiple projects a lot of which won't be using angular.
Edit:
Just to clarify, I'm using a tal template from zope. In that template I have two fill slots, I would like to use the same angular app in both fill slots without having to change the original tal template if possible.