Images and object, dynamic insert in HTML

#1

hi all,
I have a collection of images strored in the www>img>IT> folder. They all have the same structure: IT001, IT002… until IT250.
Those “ITxxx” numbers are ojects ID if you will, so for an object “IT154” i DO have the corresonding image “IT154small.jpg” in the www>img>IT folder.

Question is: given that I have an the following array in my controller.js :

.controller('DishListController', function($scope) {
 $scope.dishList = [
{ 	nameEnglish: 'beef burgungdy', 
	nameLocal: 'boeuf bourgignon',
	description: 'xxxxxxxx',
	region: 'lazio',
	itemid: 'IT018',
	cuisineTypeIsoCode: 'IT',
	id: 1,	
},
{ 	nameEnglish: 'duck liver', 
	nameLocal: 'foie gras',
	description: 'xxxxxxxx',
	region: 'sicile',
	itemid: 'IT020',
	cuisineTypeIsoCode: 'IT',
	id: 2,	
},	
{ 	nameEnglish: 'veal stew',
	nameLocal: 'blanquette de veau',
	description: 'xxxxxxxx',	
	region: 'parme',
	itemid: 'IT021',
	cuisineTypeIsoCode: 'IT',
	id: 3,	
},
{ 	nameEnglish: 'ionion soup', 
	nameLocal: 'soupe a loignon',
	description: 'xxxxxxxx',
	region: 'vanitia',
	itemid: 'IT022',
	cuisineTypeIsoCode: 'IT',
	id: 4,	
}
];
})

and here is my html code :

<article class="item_frame">
         <a class="" href="#"><img class="bookmark_icon" src="img\bookmark_plus_whitev3.png">
	</a>
	<img class="item_main_image" src="XXXXXXXXXXXXXX">
	<img class="item_icon_circled" src="img/dishiconv4orangecircled.png">
	<h1 class="item_name_english">{{dish.nameEnglish}}</h1>
	<h2 class="item_name_local_language">{{dish.nameLocal}}</h2>
	<p class="item_description ">{{dish.description}}</p>
	<div class="subcuisine_container_w_flag">
		<span class="subcuisine_text_in_dish_pages"> | {{dish.region}}</span>
		<img class="flag_in_dishpages" src="img/flag.png">
	</div>	
</article><!--main article frame 1 -->

How do I dynamically insert the ad hoc image in my HTML.
Should I run a script wihtin the HTML ?

I’ve tried do set in controller.js a new parameter for each object :
imageSource: '“img/”+cuisineTypeIsoCode+"/"+itemid+"small.jpg
and put {{dish.imageSource}} in my html ,
but obviously i does not work, and obviously …I am learning JS!
thanks for your help

#2

look at the ng-src directive https://docs.angularjs.org/api/ng/directive/ngSrc

#3

thanks,
but .

I have tried to create in html :

		<img ngSrc class="item_main_image" src="{{dish.imageSource}}">

and then in controller.js :

{ 	nameEnglish: 'ionion soup', 
	nameLocal: 'soupe a loignon',
	description: 'xxxxx.',
	region: 'vanitia',
	itemid: 'IT022',
	cuisineTypeIsoCode: 'IT',
	imageSource: ( "img/" + dish.cuisineTypeIsoCode + "/" + dish.itemid + "small.jpg"),
	id: 3,	
}
];

but it breaks the page, when by its own, the string works fine, any idea please ?

#4

Sorry to say, but did you even open the link?

Try :

<img ng-src="{{dish.imageSource}}"/>

#5

Hi Vicmota thanks,
Well I did but could not get this part right, so i have taken another approach:
I finally created a new path within the html as follows :

    <img class="item_main_image" ng-src="img/{{dish.cuisineTypeIsoCode}}/{{dish.itemid}}small.jpg">

And, it did work. In other words, I could created a dynamic path within the HTML, but not in controller.js as initially intended. Again beeing new in JS, surely sthing i had not done properly…